vue axios重復(fù)點(diǎn)擊取消上一次請求封裝的方法
使用場景
重復(fù)點(diǎn)擊或者多tab標(biāo)簽使用一個(gè)視圖等（當(dāng)然也可以用加載中或者透明背景禁止請求中再次點(diǎn)擊）
封裝代碼
來自于互聯(lián)網(wǎng)
let pending = []; //聲明一個(gè)數(shù)組用于存儲每個(gè)請求的取消函數(shù)和axios標(biāo)識
let cancelToken = axios.CancelToken;
let removePending = (config) => {
for(let p in pending){
if(pending[p].u === config.url + '&' + config.method) { //當(dāng)當(dāng)前請求在數(shù)組中存在時(shí)執(zhí)行函數(shù)體
pending[p].f(); //執(zhí)行取消操作
pending.splice(p, 1);
}
}
}
// http請求攔截器
axios.interceptors.request.use(config => {
removePending(config); //在一個(gè)axios發(fā)送前執(zhí)行一下取消操作
config.cancelToken = new cancelToken((c)=>{
// 這里的axios標(biāo)識我是用請求地址&請求方式拼接的字符串，當(dāng)然你可以選擇其他的一些方式
pending.push({ u: config.url + '&' + config.method, f: c });
});
return Promise.resolve(config)
}, error => {
return Promise.reject(error)
})
// http響應(yīng)攔截器
axios.interceptors.response.use(data => {
removePending(data.config); //在一個(gè)axios響應(yīng)后再執(zhí)行一下取消操作，把已經(jīng)完成的請求從pending中移除
return Promise.resolve(data)
}, error => {
//加載失敗
return {'data':{}}
// return Promise.reject(error)
})
經(jīng)過多次測試發(fā)現(xiàn)不同請求也給我取消了，原因是沒有校驗(yàn)請求參數(shù)，也就是說get請求可以用，修改以下代碼
pending.push({ u: config.url + '&' + config.method, f: c });
修改為：
pending.push({ u: config.url + JSON.stringify(config.data) +'&' + config.method, f: c });//config.data為請求參數(shù)
上面判斷也需要修改，這樣get請求和post都可以用了
解決分析
（個(gè)人理解）
官方提供了axios.CancelToken來取消上一次請求方法，因此只需要判斷上一次請求是否重復(fù)。聲明數(shù)組變量 pending用于存儲每個(gè)請求實(shí)例的axios標(biāo)識（請求方式，請求參數(shù)，請求url）和該實(shí)例的取消函數(shù)；在請求攔截器中創(chuàng)建取消函數(shù)實(shí)例，將請求的標(biāo)識（判斷重復(fù)標(biāo)識）及 該請求實(shí)例取消函數(shù) push到pending數(shù)組中，創(chuàng)建取消上一次請求方法 removePending，該方法主要判斷axios請求標(biāo)識是否重復(fù)，重復(fù)則執(zhí)行該實(shí)例的取消函數(shù)，并且從 pending中移除標(biāo)識及該實(shí)例取消函數(shù)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue下滾動(dòng)到頁面底部無限加載數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue下滾動(dòng)到頁面底部無限加載數(shù)據(jù)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Vue代理報(bào)錯(cuò)404問題及解決(vue配置proxy)
這篇文章主要介紹了Vue代理報(bào)錯(cuò)404問題及解決(vue配置proxy)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
html和vue都是前端技術(shù)中非常重要的一部分,其中html是web開發(fā)的基石,而vue則是現(xiàn)代化的前端開發(fā)框架之一,下面這篇文章主要給大家介紹了關(guān)于如何將HTML頁面改寫到vue項(xiàng)目中的相關(guān)資料,需要的朋友可以參考下2024-08-08
EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用eventBus訂閱發(fā)布模式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
如何隱藏element-ui中tree懶加載葉子節(jié)點(diǎn)checkbox(分頁懶加載效果)
這篇文章主要介紹了如何隱藏element-ui中tree懶加載葉子節(jié)點(diǎn)checkbox(分頁懶加載效果)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue項(xiàng)目中極驗(yàn)驗(yàn)證的使用代碼示例
這篇文章主要介紹了vue項(xiàng)目中極驗(yàn)驗(yàn)證的使用代碼示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
使用vue2.6實(shí)現(xiàn)抖音【時(shí)間輪盤】屏保效果附源碼
前段時(shí)間看抖音，有人用時(shí)間輪盤作為動(dòng)態(tài)的桌面壁紙，一時(shí)間成為全網(wǎng)最火的電腦屏保，后來小米等運(yùn)用市場也出現(xiàn)了【時(shí)間輪盤】，有點(diǎn)像五行八卦，感覺很好玩，于是突發(fā)奇想，自己寫一個(gè)網(wǎng)頁版小DEMO玩玩,需要的朋友可以參考下2019-04-04
vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式
這篇文章主要為大家詳細(xì)介紹了vue全局實(shí)現(xiàn)數(shù)字千位分隔符格式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
基于Vue-cli的一套代碼支持多個(gè)項(xiàng)目
這篇文章主要介紹了基于Vue-cli的一套代碼支持多個(gè)項(xiàng)目的方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
springboot和vue前后端交互的實(shí)現(xiàn)示例
本文主要介紹了springboot和vue前后端交互的實(shí)現(xiàn)示例,將包括一個(gè)簡單的Vue.js前端應(yīng)用程序,用于發(fā)送GET請求到一個(gè)Spring Boot后端應(yīng)用程序,以獲取并顯示用戶列表,感興趣的可以了解一下2024-05-05