首頁 web前端 uni-app 詳細介紹Uniapp中的請求和處理結果的相關知識

詳細介紹Uniapp中的請求和處理結果的相關知識

Apr 27, 2023 am 09:06 AM

隨著行動互聯網的發展,行動應用程式的市場需求越來越大,針對該需求,諸如React Native和Flutter等各種跨平台框架應運而生。其中Uniapp是一款可用於開發跨平台應用程式的框架,它能夠快速地建立多種平台,如Android、iOS、Web、微信小程式和支付寶小程式等。

在Uniapp中,發送請求並處理請求結果是一個核心的功能,本文將詳細介紹Uniapp中的請求和處理結果的相關知識。

1.請求的發送

Uniapp中發送請求的方式有多種,最常見的方式是使用uni.request方法。

uni.request({
    url: 'http://www.example.com',
    data: {
        name: 'example'
    },
    header: {
        'content-type': 'application/json'
    },
    success: function (res) {
        console.log(res.data)
    }
});
登入後複製

該程式碼中,uni.request是發送請求的方法,需要傳入一個包含url、data、header、success等參數的對象,其中url表示請求地址,data表示請求的數據,header表示請求頭,success表示請求成功後的回呼函數。在請求過程中,也可以傳入fail和complete參數,分別表示請求失敗和請求結束後的回呼函數。

另一個發送請求的方式是使用封裝好的uni.request方法,並將其封裝到單獨的JS檔案中。

//request.js
import { getBaseUrl } from './config';

const req = (url, method, data) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: getBaseUrl() + url,
            method,
            data,
            header: {
                'content-type': 'application/json'
            },
            success: (res) => {
                resolve(res)
            },
            fail: (err) => {
                reject(err);
            }
        });
    });
}

export const post = (url, data) => {
    return req(url, 'POST', data);
}

export const get = (url, data) => {
    return req(url, 'GET', data);
}
登入後複製

該程式碼中,封裝了一個req方法,傳入url、method、data三個參數,傳回一個Promise對象,透過Promise物件實現非同步操作,將請求成功和請求失敗的結果傳遞給resolve和reject方法。同時,也封裝了get和post方法,分別表示發送get和post請求,使用方式如下:

import { get, post } from './request';

get('/user', {id: 1}).then(res => {
    console.log(res.data);
});

post('/login', {username: 'example', password: 'example'}).then(res => {
    console.log(res.data);
});
登入後複製

2.請求結果的處理

Uniapp中的請求結果一般是一個JSON對象,如下所示:

{
    "code": 200,
    "message": "success",
    "data": {
        "username": "example",
        "age": 18
    }
}
登入後複製

其中,code表示狀態碼,message表示訊息,data表示請求結果資料。

在處理請求結果時,首先需要根據code判斷請求是否成功,並根據不同狀態碼進行對應處理。可以在請求方法的success回呼函數中處理,也可以在封裝的方法中處理。

import { get } from './request';

get('/user', {id: 1}).then(res => {
    if(res.code === 200) {
        console.log(res.data);
    } else if(res.code === 401) {
        console.log('用户未登录');
    } else if(res.code === 404) {
        console.log('用户不存在');
    } else {
        console.log('请求失败');
    }
});
登入後複製

另一種處理請求結果的方式是使用攔截器。攔截器是一個函數,可以在請求發出前或請求回應後對請求做一些處理,例如添加token、過濾資料等等。在Uniapp中使用攔截器的方法是透過封裝一個request攔截器和response攔截器,分別處理請求前和請求後的邏輯。

//request.js
import { getBaseUrl } from './config';

const requestInterceptors = (config) => {
    //添加token或其他逻辑
    return config;
}

const responseInterceptors = (response) => {
    const res = response.data;
    if(res.code === 200) {
        return res.data;
    } else {
        //根据code进行错误处理
        uni.showToast({
            title: res.message,
            icon: 'none'
        });
        return Promise.reject(res);
    }
}

const request = (options) => {
    const { url, method = 'GET', data } = options;
    const config = {
        url: getBaseUrl() + url,
        method,
        data,
        header: {
            'content-type': 'application/json'
        }
    }

    return new Promise((resolve, reject) => {
        uni.request({
            ...requestInterceptors(config),
            success: (response) => {
                if(response.statusCode == 200) {
                    resolve(responseInterceptors(response));
                } else {
                    reject(response)
                }
            },
            fail: (error) => {
                reject(error);
            }
        });
    })
}

export default request;

//config.js
export const getBaseUrl = () => {
    //返回请求地址
    return 'http://www.example.com';
}
登入後複製

程式碼中,封裝了requestInterceptors、responseInterceptors和request方法,並將請求攔截器和回應攔截器封裝其中。其中requestInterceptors和responseInterceptors的作用分別是在請求前和請求後對請求進行處理。 request方法則是傳送請求的方法,使用方式如下:

import request from './request';

request({
    url: '/user',
    method: 'get',
    data: {id: 1}
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});
登入後複製

最終成品程式碼是經過最佳化後的程式碼:

//config.js
export const getBaseUrl = () => {
    //返回请求地址
    return 'http://www.example.com';
}

//request.js
import { getBaseUrl } from './config';

const requestInterceptors = (config) => {
    //添加token或其他逻辑
    return config;
}

const responseInterceptors = (response) => {
    const res = response.data;
    if(res.code === 200) {
        return res.data;
    } else {
        //根据code进行错误处理
        uni.showToast({
            title: res.message,
            icon: 'none'
        });
        return Promise.reject(res);
    }
}

const request = (options) => {
    const { url, method = 'GET', data } = options;
    const config = {
        url: getBaseUrl() + url,
        method,
        data,
        header: {
            'content-type': 'application/json'
        }
    }

    return new Promise((resolve, reject) => {
        uni.request({
            ...requestInterceptors(config),
            success: (response) => {
                if(response.statusCode == 200) {
                    resolve(responseInterceptors(response));
                } else {
                    reject(response)
                }
            },
            fail: (error) => {
                reject(error);
            }
        });
    })
}

export default request;

//api.js
import request from './request';

export const getUser = (id) => {
    return request({
        url: '/user',
        method: 'get',
        data: {id}
    });
}

//页面中使用
import { getUser } from './api';

getUser(1).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});
登入後複製

本文介紹了Uniapp中請求和處理結果的相關知識,包括發送請求和處理請求結果的不同方式,以及使用攔截器進行請求的前置和後置處理。對於使用Uniapp進行跨平台應用程式開發的開發人員來說,掌握這些知識將有助於提高開發效率和程式碼質量,並提高應用程式的穩定性和使用者體驗。

以上是詳細介紹Uniapp中的請求和處理結果的相關知識的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何處理Uni-App中的本地存儲? 如何處理Uni-App中的本地存儲? Mar 11, 2025 pm 07:12 PM

如何處理Uni-App中的本地存儲?

UniApp下載文件如何重命名 UniApp下載文件如何重命名 Mar 04, 2025 pm 03:43 PM

UniApp下載文件如何重命名

如何在Uni-App中提出API請求並處理數據? 如何在Uni-App中提出API請求並處理數據? Mar 11, 2025 pm 07:09 PM

如何在Uni-App中提出API請求並處理數據?

UniApp下載文件如何處理文件編碼 UniApp下載文件如何處理文件編碼 Mar 04, 2025 pm 03:32 PM

UniApp下載文件如何處理文件編碼

如何使用VUEX或PINIA在Uni-App中管理狀態? 如何使用VUEX或PINIA在Uni-App中管理狀態? Mar 11, 2025 pm 07:08 PM

如何使用VUEX或PINIA在Uni-App中管理狀態?

如何使用Uni-App的地理位置API? 如何使用Uni-App的地理位置API? Mar 11, 2025 pm 07:14 PM

如何使用Uni-App的地理位置API?

我如何使用Uni-App的社交共享API? 我如何使用Uni-App的社交共享API? Mar 13, 2025 pm 06:30 PM

我如何使用Uni-App的社交共享API?

如何使用Uni-App的EasyCom功能進行自動組件註冊? 如何使用Uni-App的EasyCom功能進行自動組件註冊? Mar 11, 2025 pm 07:11 PM

如何使用Uni-App的EasyCom功能進行自動組件註冊?

See all articles