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
相关文章
|
14天前
|
前端开发 小程序 JavaScript
微信小程序promise封装
微信小程序promise封装
|
14天前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
17 0
|
14天前
|
小程序 容器
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
|
12天前
|
开发框架 小程序 前端开发
微信小程序封装请求
微信小程序封装请求
|
14天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
47 0
|
14天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
14天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
14天前
axios封装和配置
axios封装和配置
23 0
|
14天前
04_装饰器封装axios_get请求
04_装饰器封装axios_get请求
33 0
|
14天前
|
小程序 JavaScript 索引
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)

热门文章

最新文章