快捷導(dǎo)航

axios如何取消重復(fù)無用的請求詳解

更新時間：2019年12月15日 14:29:24 作者：plutchar

這篇文章主要給大家介紹了關(guān)于axios如何取消重復(fù)無用的請求的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在開發(fā)中，經(jīng)常會遇到接口重復(fù)請求導(dǎo)致的各種問題。

對于重復(fù)的get請求，會導(dǎo)致頁面更新多次，發(fā)生頁面抖動的現(xiàn)象，影響用戶體驗。

對于重復(fù)的post請求，會導(dǎo)致在服務(wù)端生成兩次記錄（例如生成兩條訂單記錄）。

如果當前頁面請求還未響應(yīng)完成，就切換到了下一個路由，那么這些請求直到響應(yīng)返回才會中止。

無論從用戶體驗或者從業(yè)務(wù)嚴謹方面來說，取消無用的請求確實是需要避免的。

當然我們可以通過頁面loading來避免用戶進行下一次的操作，但本文只討論單純的如何取消這些無用的請求。

axios 的 cancelToken

axios是一個主流的http請求庫，它提供了兩種取消請求的方式。

通過axios.CancelToken.source生成取消令牌token和取消方法cancel

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
 cancelToken: source.token
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
 console.log('Request canceled', thrown.message);
 } else {
 // handle error
 }
});

axios.post('/user/12345', {
 name: 'new name'
}, {
 cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

通過axios.CancelToken構(gòu)造函數(shù)生成取消函數(shù)

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
 cancelToken: new CancelToken(function executor(c) {
 // An executor function receives a cancel function as a parameter
 cancel = c;
 })
});

// cancel the request
cancel();

需要注意的是在catch中捕獲異常時，應(yīng)該使用axios.isCancel()判斷當前請求是否是主動取消的，以此來區(qū)分普通的異常邏輯。

封裝取消請求邏輯

上面有兩種取消請求，用哪種都是可以的，這里使用第二種。

取消請求主要有兩個場景：

當請求方式method，請求路徑url，請求參數(shù)（get為params，post為data）都相同時，可以視為同一個請求發(fā)送了多次，需要取消之前的請求
當路由切換時，需要取消上個路由中未完成的請求

我們封裝幾個方法：

// 聲明一個 Map 用于存儲每個請求的標識 和 取消函數(shù)
const pending = new Map()
/**
 * 添加請求
 * @param {Object} config 
 */
const addPending = (config) => {
 const url = [
 config.method,
 config.url,
 qs.stringify(config.params),
 qs.stringify(config.data)
 ].join('&')
 config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
 if (!pending.has(url)) { // 如果 pending 中不存在當前請求，則添加進去
  pending.set(url, cancel)
 }
 })
}
/**
 * 移除請求
 * @param {Object} config 
 */
const removePending = (config) => {
 const url = [
 config.method,
 config.url,
 qs.stringify(config.params),
 qs.stringify(config.data)
 ].join('&')
 if (pending.has(url)) { // 如果在 pending 中存在當前請求標識，需要取消當前請求，并且移除
 const cancel = pending.get(url)
 cancel(url)
 pending.delete(url)
 }
}
/**
 * 清空 pending 中的請求（在路由跳轉(zhuǎn)時調(diào)用）
 */
export const clearPending = () => {
 for (const [url, cancel] of pending) {
 cancel(url)
 }
 pending.clear()
}

Map是ES6中一種新型的數(shù)據(jù)結(jié)構(gòu)，本身提供了諸多方法，方便操作，適合當前場景。如果不熟悉的可以查看ECMAScript 6 入門。

在給config.cancelToken賦值的時候，需要判斷當前請求是否已經(jīng)在業(yè)務(wù)代碼中使用了cancelToken

qs是一個專門用來轉(zhuǎn)換對象和字符串參數(shù)的庫，最初是由 TJ 創(chuàng)建并維護的，也是axios推薦使用的參數(shù)序列化庫。這里我們的目的只是單純的將參數(shù)對象轉(zhuǎn)換為字符串方便拼接。

Map結(jié)構(gòu)默認部署了Symbol.iterator屬性，可以使用for...of循環(huán)直接獲取鍵名和鍵值，當然你也可以使用for...in循環(huán)。

在 axios 攔截器中使用

主要的方法已經(jīng)寫好了，只需要添加到axios攔截器中就可以了。

axios.interceptors.request.use(config => {
 removePending(options) // 在請求開始前，對之前的請求做檢查取消操作
 addPending(options) // 將當前請求添加到 pending 中
 // other code before request
 return config
}, error => {
 return Promise.reject(error)
})

axios.interceptors.response.use(response => {
 removePending(response) // 在請求結(jié)束后，移除本次請求
 return response
}, error => {
 if (axios.isCancel(error)) {
 console.log('repeated request: ' + error.message)
 } else {
 // handle error code
 }
 return Promise.reject(error)
})

將clearPending()方法添加到vue路由鉤子函數(shù)中

router.beforeEach((to, from, next) => {
 clearPending()
 // ...
 next()
})

測試效果

最后我們可以在瀏覽器中測試下，可以將chrome中控制面板的Network的網(wǎng)絡(luò)狀態(tài)切換為Slow 3G來模擬網(wǎng)速慢的情況。

我們把查詢按鈕的loading或者disabled屬性干掉來方便測試

在上面控制面板中可以看到，紅色的status為canceled的就是被取消的請求。

上面代碼在e-admin-vue（一個使用 vue + element-ui + vue-cli3 構(gòu)建的 rbac 權(quán)限模型）或者e-admin-react（一個使用 react + antd + create-react-app 構(gòu)建的 rbac 權(quán)限模型）中都有體現(xiàn)，歡迎 star。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: