微信小程序使用Promise对wx.request()进行封装详细教程（附完整代码）

1. 原生wx.request()的缺点

wx.request官网说明

• 回调地狱，可能会出现多层success套用的情况（用Promise封装解决）
• 效率低，代码冗杂，每次都要写共同的参数（比如headers,公共的url）
• 可维护性差，后续查看和改代码不方便，封装后都在同一个文件，一目了然

wx.request({url:'example.php',//仅为示例，并非真实的接口地址data:{x:'',y:''},header:{'content-type':'application/json'// 默认值},success(res){
    console.log(res.data)}})

作为一个合格的前端开发，为了代码质量和可维护性（

不是因为懒

），肯定要对这种代码进行封装，来让我们的代码变得更优雅~~

2. 封装思路

所有的封装思路（无论是组件还是逻辑代码），总结起来一句话就是抽取共性。
观察我们的网络请求代码，可以发现，有很多是一样的，如公共请求路径、对响应错误的处理方法、headers参数（如token）。
不同的如具体的接口地址、请求类型、请求参数，我们封装的时候把相同的抽取成一个文件，不同的地方再进行传参即可。

3. 具体实现代码

先建一个api文件夹（叫什么都可以，但是为了规范化），在下面新建文件

request.js

// ----http----// api URLconst apiUrl ="https://接口地址:端口";// 公共的请求地址// 封装微信请求方法constrequest=(params)=>{let url = params.url;let data = params.data;let method = params.method;let header ={"Content-Type":"application/json"};// 鉴权验证，获取登录之后后端返回的token，存在即在头部Authorization写token，具体的看后端需求if(wx.getStorageSync("token")){// header.Authorization = wx.getStorageSync("token");
    header.token = wx.getStorageSync("token");}returnnewPromise((resolve, reject)=>{
    wx.request({url: apiUrl + url,// api urlmethod: method,// get/postdata: data,// 请求参数header: header,// 头部success(res){// 请求成功// 判断状态码---errCode状态根据后端定义来判断if(res.statusCode <399){if(res.data.Code ===401){
            wx.showModal({title:"提示",content:"请登录",showCancel:false,success(res){
                wx.navigateTo({url:"/pages/login/login",});},});reject(res.data);}resolve(res.data);}else{// 其他异常switch(res.statusCode){case404:
              wx.showToast({title:'未知异常',duration:2000,})break;default:
              wx.showToast({title:'请重试...',duration:2000,})break;}reject("未知错误,请稍后再试");}},fail(err){if(err.errMsg.indexOf('request:fail')!==-1){
          wx.showToast({title:'网络异常',icon:"error",duration:2000})}else{
          wx.showToast({title:'未知异常',duration:2000})}reject(err);},complete(){
        wx.hideLoading()},});});};

module.exports ={
  apiUrl,
  request,}

然后再按业务需求，对具体的接口地址进行封装，比如，我这里在api文件夹下再新建一个

user.js

文件，里面放登录，注册的一些方法，请求类型和请求参数根据接口文档写。

import{
  request
}from"./request"// 用户相关// 登录exportconstlogin=(params)=>{returnrequest({url:'/user/login',data: params,method:'POST',})}// 注册exportconstregister=(params)=>{returnrequest({url:'/user/reg',data: params,method:'POST',})}

正式在项目中使用：

import{
  login
}from'../../../api/user'// 点击登录的方法handleLogin(){login({name: xxx,password: xxx,}).then((res)=>{if(res.code ==200){// 登录成功之后的处理}else{// 登录失败的处理}}).catch((res)=>{})}