前言
作為一個前端開發者，從最開始的js、jQuery一把梭，后來的vue、react、angular等MVVM、MVC框架，我們在開發工程中都離不開HTTP庫的使用。
HTTP庫
1、jQuery的$.ajax
調用了XMLHttpRequest對象，封裝在相關函數在配置項中，一旦傳入了必需選項，則直接調用相應的send()方法進行數據的請求
2、Axios
基于Promise的請求庫，通過判斷XMLHTTPRequest對象存在與否，來支持客戶端和node服務端發送請求，封裝的很不錯的HTTP庫，支持promise、攔截請求和響應等
小程序網絡請求
wx.request({ url: 'test.php', //僅為示例，并非真實的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默認值 }, success (res) { console.log(res.data) }})小程序本身的請求已經封裝的很不錯了，使用起來和$.ajax相似，支持許多配置項的設置，但是缺少公共配置、響應和請求攔截等實用功能
第一步--創建請求實例
class Axios { constructor() { this.instance = null // 類的實例 this.config = defaultConfig } create(instanceConfig) { const { config } = this // 創建實例的時候添加基本配置 this.config = { ...config, ...instanceConfig } return this } // 單例 static getInstance() { if (!this.instance) { this.instance = new Axios() } return this.instance }}創建實例
const axios = Axios.getInstance()
promise包裝小程序請求
const dispatchRequest = function(config) { return new Promise((resolve, reject) => { wx.request({ ...config, url: config.base + config.url, success: res => { resolve(res) }, fail: res => { reject(res) } }) })}給請求實例添加request方法
request(options) { const { config } = this // 實例請求的時候添加基本配置 const requsetOptions = { ...config, ...options } return dispatchRequest(requsetOptions)}第二步--創建請求工具方法
創建實例，通過create設置基本配置項
const instance = (config = {}) => { return axios.create({ base: globalApi, ...config })}創建請求工具方法，執行實例request
export function request(options) { const { baseConfig, url, method, data, isLogin } = options instance(baseConfig) .request({ url, method: method || 'GET', data }) .then(res => { options.success && options.success(res) }) .catch(err => { if (options.error) { options.error(err) } else { errAlert() } }) }}這樣，一個請求的工具方法就完成了，但是這個方法現在只支持基本的請求和基本配置項的配置，還是缺少我們很常用的公共請求和響應的攔截。
第三部--添加請求和響應的攔截器
創建攔截器實例
class InterceptorManager { constructor() { this.fulfilled = null this.rejected = null } use(fulfilled, rejected) { this.fulfilled = fulfilled this.rejected = rejected }}在請求實例的構造方法中添加請求和響應攔截實例
constructor() { this.instance = null // 類的實例 this.config = defaultConfig this.interceptors = { request: new InterceptorManager(), response: new InterceptorManager() }}在實例的request添加promise執行隊列
request(options) { const { config, interceptors } = this // 實例請求的時候添加基本配置 const requsetOptions = { ...config, ...options } const promiseArr = [] // promise存儲隊列 // 請求攔截器 promiseArr.push({ fulfilled: interceptors.request.fulfilled, rejected: interceptors.request.rejected }) // 請求 promiseArr.push({ fulfilled: dispatchRequest, rejected: null }) // 回調攔截器 promiseArr.push({ fulfilled: interceptors.response.fulfilled, rejected: interceptors.response.rejected }) let p = Promise.resolve(requsetOptions) promiseArr.forEach(ele => { p = p.then(ele['fulfilled'], ele['rejected']) }) return p }在請求工具方法中通過設置請求和響應的攔截方法
axios.interceptors.request.use( request => { return request }, err => { console.error(err) })axios.interceptors.response.use( response => { return response }, err => { console.error(err) })在請求攔截方法里面可以添加數據轉換，在請求頭部添加sign、token等，在響應攔截方法里面去做公共的數據處理等
最后
從零搭建一個簡單的請求庫很簡單，但是想考慮的方方面面，設計好整個流程會比較麻煩，需要不斷的改進和重構，本文的搭架過程參考了Axios的部分源碼。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。
新聞熱點
疑難解答
