淺談小程式中的請求封裝 近兩個月學習了小程式的開發，並且擼了一個不大不小的demo，算是正式入門了小程式，在此想分享下小程式的開發經驗。 前言 在小程式的開發中，或者說在整個前端開發中，請求都是繞不過去的一道坎。在Vue開發中，我們可以採用 "axios" 這個成熟的插件來進行HTTP請求。但是，遺 ...
淺談小程式中的請求封裝
近兩個月學習了小程式的開發，並且擼了一個不大不小的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再走唄？
