前端微信小程序之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)