2023详细介绍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中的请求和处理结果的相关知识的详细内容，更多请关注zzsucai.com其它相关文章！