微信小程序progress（微信小程序使用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 URL const apiUrl = "https://接口地址:端口";// 公共的请求地址 // 封装微信请求方法 const request = (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"); } return new Promise((resolve, reject) => { wx.request({ url: apiUrl + url, // api url method: method, // get/post data: 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) { case 404: 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" // 用户相关 // 登录 export const login = (params) => { return request({ url: /user/login, data: params, method: POST, }) } // 注册 export const register = (params) => { return request({ 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) => {}) }