對於需要大量使用 http
請求的專案,我們通常會選擇對 http
請求的方法進行二次封裝,以便增加統一的攔截器,或者統一處理阻止重複提交之類的邏輯。Vue.js
的專案中我們選擇使用了 axios
這樣一個 http
庫,下面也就簡述下基於 axios
做的簡單二次封裝
依賴
首先引入 axios
,對於 ie9
這樣不支援 promise
的瀏覽器還需引入 es6-promise
模組
require(`es6-promise`).polyfill();
var axios = require(`axios`);
axios
初始化
初始化我們要實現兩個需求:
1.傳送請求時帶上 cookies
2.重發傳送請求時,如果前一次相同請求還未結束則中止前一次請求
const httpServer = axios.create({
responseType: `json`,
withCredentials: true, // 設定 withCredentials 使請求帶上 `cookies`
cancelToken: new axios.CancelToken(function (c) {
cancel = c // 記錄當前請求的取消方法
})
})
http
請求二次封裝
var promiseArr = {} // 用於記錄每個請求的取消方法
const gUtils = {
getData: function () {
let cancel
const httpServer = axios.create({
responseType: `json`,
withCredentials: true, // 設定 withCredentials 使請求帶上 `cookies`
cancelToken: new axios.CancelToken(function (c) {
cancel = c // 記錄當前請求的取消方法
})
})
// 設定一個攔截器,每次發起請求前取消掉在進行中的相同請求
httpServer.interceptors.request.use(function (config) {
if (promiseArr[config.url]) {
promiseArr[config.url](`操作取消`)
promiseArr[config.url] = cancel
} else {
promiseArr[config.url] = cancel
}
return config
}, function (err) {
// return Promise.reject (error)
})
return httpServer
}
}
這樣我們在對接服務時候直接使用我們封裝好的 http
請求方法即可