微信小程序官方的请求库不支持 Promise 风格，而前端业务比较方便的是使用promise，所以一般业务开发需要封装下请求工具，通过简单的封装，可以有以下功能：
- 统一配置错误码
- 配置提示消息展示时间
- 断网提示
- api白名单（无需登录）
- 登录状态判断
- 请求结果封装
- 请求提示信息封装
- 支持自定义回调
// config/index.js
// api 请求BaseUrl
export const apiBase = "https://xxx.com/xxx"
/* http错误码 */
export const errCodeArr = [500, 502, 503, 504, 403, 404, 400, 401]
export const errMsgMap = {
400: '请求错误',
401: '登录状态失效，请重新登录',
403: '拒绝访问',
404: '请求地址不存在',
500: '服务器繁忙',
502: '网关错误',
503: '服务不可用，服务器暂时过载或维护',
504: '网关超时'
}
export const toastTime = 2000
// utils/util.js
const getNetworkType = () => {
return wx.getNetworkType()
}
const isObject = (obj) => {
return Object.prototype.toString.call(obj) === '[object Object]'
}
module.exports = {
getNetworkType,
isObject
}
// utils/storage.js
const app = getApp()
const getToken = () => {
return app.globalData.token || wx.getStorageSync('token')
}
module.exports = {
getToken
}
// utils/request.js
import {
apiBase, errCodeArr, errMsgMap, toastTime } from '../config/index'
import {
getNetworkType, isObject } from '../utils/util'
import {
getToken } from '../utils/storage'
const app = getApp()
// 白名单(不需要登录)
const whiteList = ["/v1/xx/yyy"]
export default function request(options, finishCb) {
return new Promise(async (resolve, reject) => {
const networkRes = await getNetworkType()
if (networkRes.networkType === 'none') {
wx.showToast({
title: '无网络！',
icon: 'none',
duration: toastTime
})
reject(networkRes)
return
}
const token = getToken()
if (options.url.indexOf("/op/") > -1 && whiteList.indexOf(options.url) === -1 && !token) {
wx.showToast({
title: "请先登录",
icon: "none",
duration: toastTime
})
return
}
const {
url,
method = 'GET',
title = '加载中...', // loading文字
failText = '请求数据失败', // 请求失败描述
errTip = 'toast', // 错误提示，是Toast还是Modal
data = {
},
header = {
},
mask = false, // 是否开启mask
loading = true, // 是否loading
timeout = 8000, // 超时时间
hideLoadingTime = 500 // 多少毫秒隐藏loading
} = options
const tHeader = {
'Authorization': token, ...header}
loading && wx.showLoading({
title, mask})
wx.request({
url: apiBase + url,
method,
timeout,
data,
header: tHeader,
success(res) {
if (!isObject(res.data)) {
wx.showToast({
title: '服务端异常',
icon: 'error',
duration: toastTime
})
return
}
// 针对HTTP错误码进行处理
const {
statusCode, data = {
}} = res
if (errCodeArr.includes(statusCode)) {
wx.showToast({
title: data.message || errMsgMap[statusCode],
icon: 'error',
duration: toastTime
})
return Promise.reject(res)
}
if (!data.flag) {
errTip === 'toast' && data.message && wx.showToast({
title: data.message, icon:'none', duration: toastTime})
errTip === 'modal' && data.message && wx.showModal({
showCancel: false,
content: data.message
})
}
// token失效跳转登录页面
if(data.code === 406){
app.globalData.userInfo = null
app.globalData.token = ""
wx.clearStorage({
success: () => {
wx.navigateTo({
url: '/pages/user/login/login',
})
}
})
}
resolve(data)
},
fail(err) {
wx.showToast({
title: failText,
icon: 'error',
duration: toastTime
})
reject(err)
},
complete() {
const timer = setTimeout(() =>{
wx.hideLoading()
clearTimeout(timer)
}, hideLoadingTime)
finishCb && finishCb()
}
})
})
}