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