axios如何取消重復(fù)無(wú)用的請(qǐng)求詳解

前言

創(chuàng)新互聯(lián)長(zhǎng)期為近1000家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為乾安企業(yè)提供專(zhuān)業(yè)的做網(wǎng)站、網(wǎng)站建設(shè)，乾安網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

在開(kāi)發(fā)中，經(jīng)常會(huì)遇到接口重復(fù)請(qǐng)求導(dǎo)致的各種問(wèn)題。

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

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

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

無(wú)論從用戶(hù)體驗(yàn)或者從業(yè)務(wù)嚴(yán)謹(jǐn)方面來(lái)說(shuō)，取消無(wú)用的請(qǐng)求確實(shí)是需要避免的。

當(dāng)然我們可以通過(guò)頁(yè)面loading來(lái)避免用戶(hù)進(jìn)行下一次的操作，但本文只討論單純的如何取消這些無(wú)用的請(qǐng)求。

axios 的 cancelToken

axios是一個(gè)主流的http請(qǐng)求庫(kù)，它提供了兩種取消請(qǐng)求的方式。

通過(guò)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.');

通過(guò)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中捕獲異常時(shí)，應(yīng)該使用axios.isCancel()判斷當(dāng)前請(qǐng)求是否是主動(dòng)取消的，以此來(lái)區(qū)分普通的異常邏輯。

封裝取消請(qǐng)求邏輯

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

取消請(qǐng)求主要有兩個(gè)場(chǎng)景：

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

我們封裝幾個(gè)方法：

// 聲明一個(gè) Map 用于存儲(chǔ)每個(gè)請(qǐng)求的標(biāo)識(shí) 和 取消函數(shù)
const pending = new Map()
/**
 * 添加請(qǐng)求
 * @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 中不存在當(dāng)前請(qǐng)求，則添加進(jìn)去
  pending.set(url, cancel)
 }
 })
}
/**
 * 移除請(qǐng)求
 * @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 中存在當(dāng)前請(qǐng)求標(biāo)識(shí)，需要取消當(dāng)前請(qǐng)求，并且移除
 const cancel = pending.get(url)
 cancel(url)
 pending.delete(url)
 }
}
/**
 * 清空 pending 中的請(qǐng)求（在路由跳轉(zhuǎn)時(shí)調(diào)用）
 */
export const clearPending = () => {
 for (const [url, cancel] of pending) {
 cancel(url)
 }
 pending.clear()
}

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

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

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

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

在 axios 攔截器中使用

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

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

axios.interceptors.response.use(response => {
 removePending(response) // 在請(qǐng)求結(jié)束后，移除本次請(qǐng)求
 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()
})

測(cè)試效果

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

我們把查詢(xún)按鈕的loading或者disabled屬性干掉來(lái)方便測(cè)試

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

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

本文標(biāo)題：axios如何取消重復(fù)無(wú)用的請(qǐng)求詳解
URL分享：http://bm7419.com/article42/pcdohc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站維護(hù)、Google、虛擬主機(jī)、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)