前端微信小程序之wx.request的封装

用uni-app写小程序, 发起网络请求用的依旧是使用的wx的原生API, wx,request

但是实际开发中发现, 每次发送请求, URL都需要写完整的地址, 很是麻烦, 所以想到类似AXIOS的请求拦截器, 设置一个请求头, 就不用每次发送请求都携带协议和域名. 直接写后面的参数

 

该方法是基于VUE的, 因为uni-app框架 本身就是基于VUE的一款微信小程序开发框架

const request = function (data) {
  const { baseURL } = data
  return function (Vue) {
    Vue.prototype.http = async function (params) {
      const { url, method, data } = params
      const ret = await uni.request({
        url: baseURL + url,
        method,
        data
      })
      return ret[1].data
    }
  }
}

// 这里调用函数相当于调用了上面函数的最外层, 并且携带 baseURL 进去了
// 然后该函数返回了一个函数, 该函数没有接受任何参数, 所以事件对象直接打印出了 Vue 的实例
// 然后就能通过vue的实例, 在vue的原型上面挂载一个函数, 并且该函数可以通过形参来接收数据
// uni-app 对多数的 wx 的 promise 都进行了封装, 例如requesrt, 如果函数对象中写 success 函数 , 那么 该函数默认是异步函数
// 如果没有写success , 那么就会解析成同步处理的函数, 就能通过async 和 await 关键字进行修饰, 从而让代码同步执行
// 最重要的一步, 是上面原型上面挂载的函数, 必须要有返回值, 不然该函数没有任何意义 , 返回的时候还能对 从服务器 获取到的数据进行加工

// 这样做的好处是, 第一, 不用每次都写完整的请求地址, 第二, 可以对返回的值, 进行加工, 不用每次都 res.data.data , 有的甚至 数据层数更多, 使用繁琐
// 第三, 如果当前使用的主机发生变化(很多公司的服务器都不止一台, 主机地址也可能会变化), 封装成组件, 修改主机名就不用逐个文件的修改

const plugin = request({
  baseURL: 'https://www.liuyuexue.com',
})

// 这种做法的原理就是利用vue的自定义组件特性, Vue,use 本身后面就是接受一个函数,所以我们直接把wx.request封装成函数, 注册为vue的组件

Vue.use(plugin)