小程序封装简单的axios

小程序有axios吗?
没有,那怎么办?
可以自己封装
很难吗?
不难。
上代码:

//封装axios函数
// 创建一个步进器,达到控制导航栏加载动画,可加可不加(装逼的话可以加上)
let requestCount = 0
// 保存基地址
const baseUrl = '基地址'
const axios = (promise) => {
//开始的时候步进器要加1
  requestCount++
  // 请求开始的时候执行导航加载动画,增加用户体验,可加可不加
  wx.showNavigationBarLoading()
  //resolve请求成功的回调函数,reject失败的回调函数
  return new Promise((resolve, reject) => {
  //使用小程序的[wx.request(Object object)](https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html)
    wx.request({
    //把传入的数据解构出来
      ...promise,
      // 替换promise中的URL,这样可以不用输入基地址了,很方便的
      url: baseUrl + promise.url,
      success: (result) => {
      //成功了
        resolve(result)
      },
      fail: (error) => {
      //失败了
        wx.showToast({
          title: '失败',
          icon: 'none'
        })
        reject(error)
      },
      complete: () => {
      //无论成功还是失败
        requestCount--
        if (requestCount === 0) {
          // 无论成功失败都要停止导航栏动画
          wx.hideNavigationBarLoading()
        }
      }
    })
  })
}


export default axios//这个是暴露出这个函数,哪里需要就引入这个文件就可以使用,方法在下边
// wx.axios = axios//这个文件必须要添加到全局里面,不然无法执行,但是这样的话,调用的时候有个bug

方法:

import axios from 'js文件的地址'

bug
在调用这个方法时,里面如果使用this的话在编译的时候会变成_this,这个原因也不知道为什么,奉劝各位不要使用下边的。

谢谢大家!!!

你可能感兴趣的:(笔记,小程序,javascript,前端)