【背景】
最近在搞小程序的项目，由于同个页面发起太多嵌套的数据请求，导致阅读自己的代码都很困难，就重新用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操作回调函数---->宏任务
扫描二维码关注公众号，回复：
16957781 查看本文章
