uniapp的请求封装

1. 什么是uniapp

Uniapp是由DCloud公司打造的基于Vue.js开发跨平台应用的框架，它可以将Vue.js代码直接编译生成iOS、Android、H5以及各种小程序等多个端的应用。由于uniapp的强大灵活和方便开发，所以被越来越多的开发者所使用。

2. uniapp请求封装

2.1 uni.request

uni.request是uniapp中用于发送HTTP请求的方法，其原型为：

uni.request(Object object)

该方法接收一个参数object，是一个Object类型，包括以下属性：

url: String类型，必选项，表示请求地址

data: Object/String/ArrayBuffer类型，可选项，表示请求参数数据

header: Object类型，表示请求头部

method: String类型，可选项，表示请求HTTP方法，默认为GET

dataType: String类型，可选项，表示请求的数据类型，默认为json

responseType: String类型，可选项，表示响应的数据类型，默认为text

sslVerify: Boolean类型，可选项，表示是否验证ssl证书，默认为true

complete: Function类型，可选项，表示请求完成时的回调函数

2.2 请求失败处理

在uniapp开发中，网络请求是不可避免的，对于请求而言，它也有可能会失败。为了保证用户体验，我们需要对请求失败进行相应的处理。

我们可以通过uni.request的complete属性来进行请求失败的处理：

uni.request({

    url: 'https://www.example.com',
    complete: function(res) {
        if (res.statusCode !== 200) {
            uni.showToast({
                title: '请求失败',
                icon: 'none'
            })
        }
    }
})

在上面的代码中，我们为complete属性赋值了一个回调函数，当请求完成时，如果响应的状态码不为200（即请求失败），则通过uni.showToast方法向用户显示“请求失败”的提示信息。

2.3 请求封装

由于uni.request方法的书写过程比较繁琐，为了提高开发效率，可以将其进行封装。这里我们可以将uni.request方法封装为一个Promise类型的函数，方便我们进行异步编程。

下面是一个基于Promise封装的uni.request请求代码：

export default function request(options) {

    return new Promise((resolve, reject) => {
        uni.request({
            ...options,
            success: (res) => {
                resolve(res.data)
            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}

在上面的代码中，我们将uni.request封装为一个Promise类型的函数，并使用ES6的解构赋值来进行配置参数传递，当请求成功时，将响应数据传递给resolve函数，当请求失败时，将错误信息传递给reject函数。

2.4 请求拦截器

在进行网络请求时，有时需要在请求头部中添加一些特定的信息，对于这种情况我们可以使用请求拦截器进行处理。

我们可以通过在封装的uni.request函数中添加请求拦截器来实现，在请求拦截器中添加请求头部信息。

以下是一个基于请求拦截器的封装请求代码：

import store from '@/store'

export default function request(options) {
    // 添加请求拦截器
    uni.addInterceptor('request', {
        // 请求拦截函数
        handler(config) {
            // 获取Token参数
            let token = store.state.token
            // 添加请求头部信息
            config.header.Authorization = `Bearer ${token}`
            // 返回处理后的配置参数
            return config
        }
    })
    return new Promise((resolve, reject) => {
        uni.request({
            ...options,
            success: (res) => {
                resolve(res.data)
            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}

在上面的代码中，我们通过uni.addInterceptor添加了请求拦截器，并为请求拦截器指定了一个handler函数来处理请求头部信息。