基于 wx.request 封装请求工具函数

/** 请求基地址 */
const BASE_URL = 'xxxx'
/* 记录请求的数量 */
const QUEUE = []

/** 拦截器 */
const interceptors = {
  //  请求拦截器
  request(params) {
    return Object.assign({}, params, {
      header: {
        author: 'xxx'
      }
    })
  },

  //  响应拦截器
  response({ data: { result } }) {
    return result
  }
}

/** 请求函数 */
function http(params) {

  params.url = BASE_URL + params.url

  return new Promise((resolve, reject) => {
    
    //  调用请求拦截器
    params = interceptors.request(params)
    
    //  开启Loading
    QUEUE.length === 0 && wx.showLoading({ title: '正在加载...', mask: true })

    /* 成功 */
    params.success = (res) => {
      resolve(interceptors.response(res))
    }

    /* 失败 */
    params.fail = (err) => {
      reject(err)
    }

    /* 不管成功失败 */
    params.complete = () => {
      //  每当一次请求结束后，就将数组 QUEUE 的长度减1
      QUEUE.pop()
      QUEUE.length === 0 && wx.hideLoading()
    }

    QUEUE.push('loading')

    wx.request(params)

  })
}

/** 快捷方法  GET 请求 */
http.get = (url, data) => {
  return http({
    url,
    method: 'GET',
    data
  })
}
/** 快捷方法  POST 请求 */
http.post = (url, data) => {
  return http({
    url,
    method: 'POST',
    data
  })
}


export default http

基于 uni.request 封装请求工具函数 Vue3-TS 版本

import { useMemberStore } from '@/stores'

/* 基地址 */
const BASE_URL: string = 'xxx'

/* 记录当前请求的数量 */
const QUEUE: Array<string> = []

/* 定义接口响应的数据类型 */
interface Data<T> {
  msg: string
  result: T
}

/** 请求拦截器 */
const interceptor: UniApp.InterceptorOptions = {
  invoke(options: UniApp.RequestOptions) {
    //  拼接请求地址
    if (!options.url.startsWith('http')) {
      options.url = BASE_URL + options.url
    }

    //  请求超时事件
    options.timeout = 10000

    //  请求头
    options.header = {
      //  保留原本的头信息
      ...options.header,
      //  追加新属性
      'source-client': 'miniapp',
    }

    //  携带token
    const memberStore = useMemberStore()
    const token = memberStore.profile?.token
    if (!token) return
    options.header.Authorization = token
  },

  success() {},

  fail() {},

  complete() {},
}

/** 请求函数（响应拦截器） */
export default <T>(options: UniApp.RequestOptions) => {
  return new Promise<T>((resolve: Function, reject: Function) => {
    //  开启Loading
    QUEUE.length === 0 && uni.showLoading({ title: '加载中...', mask: true })
    
    QUEUE.push('loading')
    
    uni.request({
      ...options,

      //  请求成功
      success(response: UniApp.RequestSuccessCallbackResult) {
        const { data, errMsg, statusCode } = response

        if (statusCode >= 200 && statusCode < 300) {
          //  保存数据
          resolve((data as Data<T>).result)
        } else if (statusCode === 401) {
          //  提示用户登录状态已过期
          uni.showToast({
            icon: 'none',
            title: errMsg || '登录信息已过期，请重新登录',
          })

          //  清空用户信息
          const memberStore = useMemberStore()
          memberStore.clearProfile()

          //  跳转至登录
          uni.navigateTo({ url: 'pages/login/login' })

          reject(new Error(errMsg))
        } else {
          //  其它错误
          uni.showToast({
            icon: 'none',
            title: errMsg || '请求异常',
          })
          reject(new Error(errMsg))
        }
      },

      //  请求失败
      fail(error: UniApp.GeneralCallbackResult) {
        uni.showToast({
          icon: 'none',
          title: error.errMsg || '网络异常，请稍后重试',
        })
        reject(new Error(error.errMsg))
      },

      //  不管成功还是失败
      complete() {
        //  每当一次请求结束后，都将数组 QUEUE 数组的长度减1
        QUEUE.pop()

        QUEUE.length === 0 && uni.hideLoading()
      },
    })
  })
}

uni.addInterceptor('request', interceptor) //  普通请求
uni.addInterceptor('uploadFile', interceptor) //  文件上传