淺談小程序中的請求封裝

淺談小程序中的請求封裝

近兩個月學習了小程序的開發，而且擼了一個不大不小的demo，算是正式入門了小程序，在此想分享下小程序的開發經驗。

前言

在小程序的開發中，或者說在整個前端開發中，請求都是繞不過去的一道坎。在Vue開發中，咱們能夠採用 axios 這個成熟的插件來進行HTTP請求。可是，遺憾的是，到目前爲止，小程序沒有一個比較好用的插件來進行HTTP請求。此時，咱們須要對小程序的HTTP請求進行封裝，以方便咱們後續開發。

淺析wx.request

衆所周知，在小程序中，咱們經過 wx.request 方法來進行HTTP請求（或者說是HTTPS請求）。

經過 官方文檔 咱們能夠知道， wx.request 方法接收一個對象，對象能夠有9個屬性：url，data，header，method，dataType，responseType，success，fail，complete。除了url是必填的之外，其他都是可選項。在這些屬性裏面，最經常使用的是 method，data，header，success以及fail這幾個屬性。畢竟咱們總要設置請求方法、請求數據、請求頭以及請求成功或失敗的處理方法是否是？

因此接下來咱們的目標咱們已經明確，就是對這些經常使用屬性進行封裝。

封裝HTTP類

對於HTTP請求的封裝，有不少種方法，好比：axios 採用的是經過IIFE做爲工廠函數處理並返回一個Axios的實例。在這裏，我推薦使用類，由於類的封裝形式，正是axios 的封裝形式的增強版。

爲了一致性，我也採用request做爲請求的方法名，而且接受相同的對象做爲參數。此時，咱們已經能夠實現出如下代碼：

class HTTP {
    request (params) {
        wx.request({
            url: params.url,
            method: params.method,
            data: params.data,
            header: params.header,
            success: (res) => {
                params.success(res)
            },
            fail: (err) => {
                params.fail(err)
            }
        })
    }
}

接下來，咱們須要對各個屬性進行處理。

缺省屬性處理

因爲除了url，其他的的屬性皆爲可選可選項，因此須要對可選屬性進行缺省屬性的處理。

在小程序官方文檔中，當不傳入method屬性時，默認採用GET方法，因此咱們須要將method的默認值設爲GET，設置method的默認值的方式很簡單：

if (!params.method) {
    params.method = 'GET'
}

可是，這種方式不夠優雅，咱們能夠採用位運算符的方式進行默認複製：

...
method: params.method || 'GET'
...

其他屬性也採用相似方式進行缺省值處理，除了success和fail屬性，這個咱們後面說。

從配置文件中導入HTTP參數

在正常狀況下，REST風格的接口協議給的接口路徑都是諸如/pathA/a，在此以前還有一個相似於www.baidu.com/root相似的base url，二者結合纔是真正的請求路徑。在Vue中，咱們能夠經過webpack中的proxyTable來解決這個問題，可是，小程序中沒有webpack中的proxyTable，因此須要每次請求的時候，都輸入完整請求路徑。

在HTTP類中的request方法，咱們能夠實現路徑的拼接。

...
url: 'www.baidu.com/root' + params.url,
...

可是，這裏有個問題，base url是寫死的，也就是說，咱們每作一個項目，都須要從新設置一次base url的值，這顯然是有問題的。

爲了處理該問題，我新建了一個config.js文件，做爲該項目的配置文件，用來存儲全部項目相關的配置，好比base url以及HTTP Header。

const config = {
  api_base_url: 'www.baidu.com/root'，
  // 更多的配置項
}

export {config}

擁有配置文件最大的好處就是，每次修改項目，只須要修改配置文件中的配置項的值便可，重複保證了組件的封閉性，減小了對項目的耦合。

封裝success

最後，咱們須要封裝success以及fail。

顯而易見，咱們只有在HTTP狀態碼爲2**或者304才調用success，因此咱們須要對響應結果的狀態碼進行判斷，根據判斷結果決定是否執行params.success

...
success: (res) => {
    let code = res.statusCode.toString()
    // 狀態碼判斷
    if (code.startsWith('2') || code === '304') {
        params.success && params.success(res.data)
    } else {
        // 失敗
    }
}

tips：通常狀況下，咱們還能夠對顯示錯誤的方法進行一次封裝，調用wx.showToast顯示服務器返回的錯誤信息。

所有代碼

通過這麼多步驟，封裝結束後的代碼是：

import {config} from '../config.js'

class HTTP {
  request (params) {
    wx.request({
      url: config.api_base_url + params.url,
      method: params.method || 'GET',
      data: params.data || {},
      header: params.header ? Object.asign(config.header, params.header):config.header
      success: (res) => {
        let code = res.statusCode.toString()
        if (code.startsWith('2') || code === '304') {
          params.success && params.success(res.data)
        } else {
          params.fail && params.fail(res.data)
          let error_code = res.data.error_code
          this._show_error(error_code)
        }
      },
      fail: (err) => {
        params.fail && params.fail(res.data)
        this._show_error(1)
      }
    })
  }
    
  // 私有方法，顯示請求錯誤信息
  _show_error(error_code) {
    if (!error_code) {
      error_code = 1
    }
    const tip = config.tips[error_code]
    wx.showToast({
      title: tip ? tip : tips[1],
      icon: 'none',
      duration: 2000
    })
  }
}

其實，HTTP類還能夠進一步優化，好比，使用解構以及默認賦值，使用promise等等，篇幅有限，我就不一一細說了，詳情能夠查看我github上的代碼。

代碼路徑：https://github.com/KarthusLorin/mini-program/blob/master/util/http.js

若是以爲不錯，github點個star再走唄？