【微信小程序】Promise封装wx.request,实现自动携带token

【背景】

最近在搞小程序的项目，由于同个页面发起太多嵌套的数据请求，导致阅读自己的代码都很困难，就重新用Promise封装了数据请求方式，该方法可自行判断是否需要携带token

【阅读前提】

需要熟悉promise的原理、js任务队列执行顺序、微信数据请求方式wx.request、ES6的export和import ，可先看下最底下的文献参考。详细注释放在代码中，自行理解 ~

【创建配置文件】

 (1) api/config.js

//设置请求头前缀BasicUrl

 const BasicUrl = "http://example:bittersea"


 //不需要token的数据请求

 const Request = (url, method, data = {}) => {

   // 传入请求参数，返回一个promise对象,参数是一个携带resolve，reject回调函数的的立即执行函数

   return new Promise((resolve, reject) => {

     // 这里执行数据请求异步操作

     wx.request({

       url: BasicUrl + url,

       method: method,

       data: data,

       header: {

         'Content-Type': 'application/json'

       },

       success: (res) => {

         // 成功回调：执行resolve

         resolve(res)    //把promise对象的状态置为已完成,携带返回结果res

       },

       fail: (err) => {

         // 失败回调：执行reject

         reject(err)  //把promise对象的状态置为失败,携带错误原因err

       }

     })

   })

 }


 // 需要携带token的请求

 const RequestToken = (url, method, data = {}) => {

   return new Promise((resolve, reject) => {

     wx.request({

       url: BasicUrl + url,

       method: method,

       data: data,

       header: {

         'Content-Type': 'application/json',

         'token': wx.getStorageSync('token')

       },

       success: (res) => {

         console.log(res)

         resolve(res)

       },

       fail: (err) => {

         reject(err)

       }

     })

   })

 }


 // 请求封装,实现自行判断是否携带token

 export const request = (url, method, data = {}, isToken = true) => {

   return new Promise((resolve, reject) => {

     //  需要携带token的请求

     if (isToken) {

       let token = wx.getStorageSync('token')

       if (token) {

          // 缓存中存在token,发起RequestToken数据请求

         RequestToken(url, method, data).then(res=>{

           resolve(res)  //把promise对象的状态置为已完成,携带RequestToken数据请求成功结果res

         })

       } else {

         // 缓存中token为空，提示授权登录

         wx.showToast({

           title: '请重新登录',

           icon:'error'

         })

       }

     } else {

      //  不需要token的请求，发起Request

       Request(url, method, data).then(res =>{

        resolve(res)//把promise对象的状态置为已完成,携带Request请求成功结果res

       })  

     }

   })

 }

(2)api/main.js

// 引入request方法
import {request} from "./config"
module.exports ={
  request,
  // 不需要token的请求
  login:(data)=>{
      return request('/login/test','post',data,false)
  },
  // 需要token的请求，true可省略
  getphone:(data) =>{
    return request('/getphone/test','post',data,true)
  }
}

(3)页面引入

略

【参考链接】

Promise的resolve和reject使用_promise resolve_满脑子技术的前端工程师的博客-CSDN博客

微信小程序基于Promise封装wx.request请求（完整代码）_wx.request 编码_在下xiao白的博客-CSDN博客

 js中代码执行顺序： 同步---->微任务 ---->DOM操作回调函数---->宏任务