详细介绍Uniapp中的请求和处理结果的相关知识

时间：2023-04-27 13:16

随着移动互联网的发展，移动应用程序的市场需求越来越大，针对该需求，诸如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.jsimport { 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.jsimport { 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.jsexport 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.jsexport const getBaseUrl = () => {    //返回请求地址    return 'http://www.example.com';}//request.jsimport { 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.jsimport 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中的请求和处理结果的相关知识的详细内容，更多请关注Gxl网其它相关文章！