微信小程序request请求库封装

Posted 2023-02-16 优小U

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