微信小程序request请求库封装

微信小程序官方的请求库不支持 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()
      }
    })
  })
}