vue axios重復點擊取消上一次請求封裝的方法
更新時間：2019年06月19日 14:20:00 作者：a2774206
這篇文章主要介紹了vue axios重復點擊取消上一次請求封裝的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
使用場景
重復點擊或者多tab標簽使用一個視圖等（當然也可以用加載中或者透明背景禁止請求中再次點擊）
封裝代碼
來自于互聯(lián)網
let pending = []; //聲明一個數組用于存儲每個請求的取消函數和axios標識
let cancelToken = axios.CancelToken;
let removePending = (config) => {
for(let p in pending){
if(pending[p].u === config.url + '&' + config.method) { //當當前請求在數組中存在時執(zhí)行函數體
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í)行一下取消操作，把已經完成的請求從pending中移除
return Promise.resolve(data)
}, error => {
//加載失敗
return {'data':{}}
// return Promise.reject(error)
})
經過多次測試發(fā)現不同請求也給我取消了，原因是沒有校驗請求參數，也就是說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為請求參數
上面判斷也需要修改，這樣get請求和post都可以用了
解決分析
（個人理解）
官方提供了axios.CancelToken來取消上一次請求方法，因此只需要判斷上一次請求是否重復。聲明數組變量 pending用于存儲每個請求實例的axios標識（請求方式，請求參數，請求url）和該實例的取消函數；在請求攔截器中創(chuàng)建取消函數實例，將請求的標識（判斷重復標識）及 該請求實例取消函數 push到pending數組中，創(chuàng)建取消上一次請求方法 removePending，該方法主要判斷axios請求標識是否重復，重復則執(zhí)行該實例的取消函數，并且從 pending中移除標識及該實例取消函數。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue中Layout內部布局el-row、el-col的實現
layout是一種非常方便的布局方式,本文主要介紹了Vue中Layout內部布局el-row、el-col的實現,具有一定的參考價值,感興趣的可以了解一下2024-07-07
VSCode前端Vue項目引入Element-ui組件三步簡單操作方法
elementui相當于一個庫,封裝好的內容,我們引入到vue項目中,就可用庫中的內容,這篇文章主要給大家介紹了關于VSCode前端Vue項目引入Element-ui組件的三步簡單操作方法,需要的朋友可以參考下2024-07-07
Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南
WangEditor是一個開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網頁和移動應用中的內容編輯場景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue中的MVVM模式使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了若依VUE前端打包到測試環(huán)境,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
Vue.js 專注于 MVVM 模型的 ViewModel 層。它通過雙向數據綁定把 View 層和 Model 層連接了起來。Vue.js和其他庫相比是一個小而美的庫，作者的主要目的是通過一個盡量簡單的 API 產生可反映的數據綁定和可組合的視圖組件，感覺作者的思路非常清晰。2016-04-04
vue.config.js中configureWebpack與chainWebpack區(qū)別及說明
這篇文章主要介紹了vue.config.js中configureWebpack與chainWebpack區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
axios作為Vue生態(tài)系統(tǒng)中濃墨重彩的一筆,我學習這個東西也是花了一定的時間的,下面這篇文章主要給大家介紹了關于axios和vue整合操作的相關資料,需要的朋友可以參考下2022-04-04
vue vue-Router默認hash模式修改為history需要做的修改詳解
今天小編就為大家分享一篇vue vue-Router默認hash模式修改為history需要做的修改詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
很多時候使用vue開發(fā)的項目,由于無法在低版本瀏覽器上運行,所以需要解決下,下面這篇文章主要給大家介紹了關于vue對于低版本瀏覽器兼容問題的解決思路,需要的朋友可以參考下2023-02-02