建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容主要講解“vue中axios怎么實現(xiàn)重復(fù)點擊取消上一次請求封裝”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“vue中axios怎么實現(xiàn)重復(fù)點擊取消上一次請求封裝”吧!
成都創(chuàng)新互聯(lián)長期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為珠山企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、網(wǎng)站制作，珠山網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
使用場景
重復(fù)點擊或者多tab標(biāo)簽使用一個視圖等（當(dāng)然也可以用加載中或者透明背景禁止請求中再次點擊）
封裝代碼
來自于互聯(lián)網(wǎng)
let pending = []; //聲明一個數(shù)組用于存儲每個請求的取消函數(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ù)組中存在時執(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標(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); //在一個axios響應(yīng)后再執(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都可以用了
到此，相信大家對“vue中axios怎么實現(xiàn)重復(fù)點擊取消上一次請求封裝”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
分享文章：vue中axios怎么實現(xiàn)重復(fù)點擊取消上一次請求封裝
當(dāng)前URL：http://www.ef60e0e.cn/article/pchpod.html
