「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。

前言

在开发微信小程序的时候，request请求用的是非常多的，微信提供了请求方法wx.request，但是每次需要配置它的请求头，和token，content-type，请求方式等..，每次配置都有可能会出错，为了不必要的麻烦，把wx.request封装起来，使用起来会更方便些也方便维护，统一管理。

Promise和wx.request介绍

Promise的状态

众所周知promise是异步编程的解决方案，比传统的回调函数形式更加方便、合理。英文单词的意思是承诺，通俗的讲是它一定会给你返回一个结果，response或者error，正确的信息和错误的信息。

Promise有三种状态：

pending：进行中、fulfilled：成功、rejected：失败

Promise对象的状态不受外界的影响，只对结果负责，可以决定当前的状态，一旦状态改变（从pending到fulfilled或者从pending到rejected），就不会在改变，任何时间都能得到这个结果。

Promise是一个构造函数，用来生成对应的实例，它只接受一个函数作为参数，函数内有两个参数分别为：reject，resolve

const promise = newPromise(function(resolve, reject) {})

resolve将Promise对象的状态从未完成变为成功，reject将Promise对象状态从未完成改变为失败

Promise的实例方法

.then() .catch() .finally()

.then()返回一个新的Promise对象实例，它的回调函数内有两个参数，第一个是resolved状态，第二个是rejected状态的回调函数

.catch()和.then()用法类似，用于发生错误时的回调函数，promise对象发生错误时，抛出一个错误回调函数

.finally()方法不管Promise对象最后的状态结果是什么，都会返回一个结果。

Promise构造函数的方法

.all()  .race() .allSettled() .resolve() .reject()

Promise.all()方法用户多个Promise实例，整合成一个新的Promise对象实例，它接收一个数组作为参数，数组内都是promise对象的实例，所有实例中只要有一个结果为fulfilled,结果就为fulfilled，结果统一返回。

const p = Promise.all([p1, p2, p3]);

Promise.rece()方法也是将多个Promise实例，整合成一个新的实例，但是有结果就会返回。整合的新Promise实例对象的状态也会全部改变。

const p = Promise.race([p1, p2, p3]);

Promise.allSettled()方法接收一组Pormise实例作为参数实例，整合成一个新的Pormise对象实例，只有等到所有的参数实例都返回结果，不管是fulfilled或者rejected，实例才能有结果

const p = [ get('/api'), get('/api'), get('/api')];
p.allSettled(p);

.resolve()和.reject()等价于p.then()和p.catch(),分别返回正确和错误信息

wx.request介绍

wx.request相当于在微信小程序内发送了http请求，HTTP协议中八种请求方式都是支持的。值得注意的是增加了complete方法，不管结果是对或者是错误都是返回结果的

wx.request({
    url:'',
    data:{},
    header:{Content-type:application/json},
    method:'',
    dataType:'',
    success:(){},
    fail:(){}
)

封装`wx.request`请求

思路

在实际开发过程中，请求方法的参数都是固定的，只需要更改data内的值，和请求方式method，而我们一般只对请求成功或者请求失败返回的结果进行下一步的处理，所以用Promise做链式调用的封装。

封装

先创建一个request方法的文件夹,然后调用文件夹内的方法即可。创建完方法在app.js内globalData中定义公共请求接口域名，这样可以统一管理

globalData: {
    $path: 'https://xxxx',
}

定义request方法接收options这样可以统一管理，needToken为是否携带token一般情况下都是带的

let {needToken = true,url,data,method,dataType,contentType,responseType,success,fail,complete
} = options;

定义请求头header参数，contentType为自定义请求数据格式可根据与后端商量的请求数据格式配置。

let header = {
    "Authorization": 'Bearer ' + wx.getStorageSync('token'),
    'content-type': contentType || "application/x-www-form-urlencoded; charset=UTF-8", //"application/json"
}

Authorization携带token，不过有的接口不需要携带参数，比如登录，登录发送验证码等，所以需要判断needToken这个也是需要传入的

if (!needToken) { //不允许带token的接口屏蔽token
  delete header.Authorization
}

使用Promise对象，让该方法有一个返回结果，success和fail分别请求成功和请求失败的方法，可以在方法内做一些判断比如token过期返回登录页，登录成功跳转到首页等

requestGlobal(options={}){
    var that = this;
    return new Promise((resolve, reject) => {
        wx.request({
            url: that.globalData.$path + url,
            data,
            header: header,
            method: method || "POST",
            contentType: contentType || "application/x-www-form-urlencoded; charset=UTF-8",
            dataType,
            responseType,
            success(res) {
                resolve(res)
            },
            fail(err){
                reject(err)
            }
        })
    })
}

调用

在我们需要调用请求的页面内引入请求文件。（要在头部率先引入）

import HTTP from "../../request";

调用封装后的请求只需要传入常见参数即可，比如url、method、data,通过链式调用能获得到相应的状态信息

HTTP.requestGlobal({
    url:'xxx',
    method:'post',
    contentType:'application/json',
    data:{}
}).then(res=>{
    //请求成功
}).catch(err=>{
    //请求失败
})

封装一种使用非常频繁的微信小程序request请求

前言