淺談小程序中的請求封裝

近兩個月學習了小程序的開發，並且擼了一個不大不小的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再走唄？