wx小程序axios二次封装

小程序原生封装axios

/**
 * wx.request() 方法的二次封装处理
 */
const baseURL = 'http://quanzhan.site:3000'

const request = ({url, data, header = {}, method = 'GET'} = {}) => {
  // 新 new Promise() 创建的 Promise 对象的状态是 pending 待定状态
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseURL + url, // 在访问接口前拼接统一的 baseURL
      data, // 请求发送给后端的数据
      header: { // 请求头
        ...header,
        'X-Token': 'token string.............', // 携带 token 认证字段
      },
      timeout: 5000, // 请求超时时间
      method, // 请求方法，默认为 GET
      success: res => { // 请求成功的回调函数
        if (res.statusCode === 200) { // HTTP状态码为 200 表示 OK
          // res.data 中保存的是后端向前端返回的数据
          // 通常后端与前端交互时有统一的规范，比如返回一个对象，有 code 与 data、message 属性。
          // 当前接口规范中，code 为 200 表示后端向前端返回成功的数据。
          // 返回的数据在 data 属性中。
          const {code, data} = res.data
          if (code === 200) {
            resolve(data) // 将 Promise 的状态修改为 fulfilled 成功状态，并携带成功的数据
            return
          }
        }
        // 如果 HTTP 状态码或后端返回的 code 表示有误时，将
        // Promise 状态修改为 rejected 失败状态，携带失败原因。
        const error = new Error('接口访问有误')
        reject(error)
      },
      fail: err => { // 请求失败
        // 将 Promise 状态标记为失败状态
        reject(err)
      },
    })
  })
}

// 利用 CommonJS 规范中的 module.exports 导出当前文件中定义的 request 方法
module.exports = request

使用

  onLoad: async function (options) {
    //4.0多个promise发请求
    try {
      let [cateData,homeData] =await Promise.allSettled([
        request({ url:'/api/tabs'}),
        request({ url:'/api/tab/1'})
      ])
      this.setData({
        categories:cateData.value.list,
        banners:homeData.value.banners,
        productList:homeData.value.items.list
      })

    } catch (error) {
      console.error(error)
    }

uniapp -axios二次封装

const baseURL = 'http://quanzhan.site:3000'

const request = ({url, method = 'GET', data, header = {}} ={}) => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + url,
      method,
      data,
      header: {
        ...header,
        'X-Token': 'token string...........', // 相当请求拦截时添加的 token 请求头字段
      },
      success: res => {
        if (res.statusCode === 200) {
          const { code, data, message } = res.data
          if (code === 200) {
            resolve(data)
            return
          }
          
          const error = new Error(message)
          reject(error)
        }
      },
      fail: err => {
        reject(err)
      },
    })
  })
}

export default request