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

隨著行動互聯網的發展，行動應用程式的市場需求越來越大，針對該需求，諸如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中文網其他相關文章！