wx小程序axios二次封装

简介: wx小程序axios二次封装

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
相关文章
|
2月前
|
资源调度 JavaScript 前端开发
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
96 1
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
|
3月前
封装axios的get、post方法
本文介绍了如何封装axios的get和post方法,并展示了具体的代码实现,包括使用axios创建实例、设置请求拦截器以及定义get和post函数。
129 2
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
150 1
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
181 1
|
2月前
|
前端开发 JavaScript API
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
110 0
|
3月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
3月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
2月前
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
35 0
|
3月前
|
小程序
wx:for 微信小程序双重for嵌套如何获取内层的迭代对象
本文介绍了微信小程序中`wx:for`循环嵌套的使用方法,特别是如何在外层循环中访问内层循环的迭代对象。通过在外层`wx:for`中使用默认的`item`进行迭代,并在内层`wx:for`中通过`wx:for-item`属性指定迭代对象的名称,从而实现了双重`for`嵌套并获取内层迭代对象的目的。
|
4月前
|
小程序 前端开发 JavaScript
小程序中wx:if 和hidden的区别
在微信小程序中,wx:if和hidden都是用于控制元素显示与隐藏的方法,但它们在工作原理和性能上存在显著差异。
107 3