前端開發(fā)中，會涉及很多異步事件處理轩性，頁面展示的處理關系最密切的就是loading圖層声登，但是loading交互在一些時候會不太友好，后端同學也不喜歡loading狀態(tài)（后端同學：這不就是說我的接口返回慢嘛揣苏？我的鍋Ｃ跎ぁ）
前端函數(shù)節(jié)流防抖也是一個解決方法，但是又有一個問題是卸察，我們處理的是異步脯厨，只要有異步就會有等待，比如坑质，防抖時間是1s合武，異步事件觸發(fā)了兩次，就需要最快2s完成洪乍，假設第一次異步3s返回眯杏，第二次異步0.5秒返回；那出現(xiàn)的情況就是壳澳，第一次觸發(fā)的3s異步岂贩，1s內沒有返回，1s后第二次觸發(fā)異步巷波，第一次的異步還沒有返回萎津，第二次的異步就就開始了，0.5秒后第二次異步返回了抹镊，但是最終結果響應的是第一次的異步锉屈。
axios取消重復請求.png
解決方案：利用axios可以很方便的取消重復請求的pending狀態(tài)，結束重復請求垮耳，只讓最后一次請求通過
let pending = []; //聲明一個數(shù)組用于存儲每個請求的取消函數(shù)和axios標識
let cancelToken = axios.CancelToken;
let removePending = (config) => {
console.log('pending',pending);
for(let p in pending){
if(pending[p].u === config.url.split('?')[0] + '&' + config.method) {
//當當前請求在數(shù)組中存在時執(zhí)行函數(shù)體
pending[p].f(); //執(zhí)行取消操作
pending.splice(p, 1); //數(shù)組移除當前請求
}
}
}
//請求攔截
service.interceptors.request.use(function(config) {
/*.....*/
removePending(config); //在一個axios發(fā)送前執(zhí)行一下取消操作
config.cancelToken = new cancelToken((c)=>{
// pending存放每一次請求的標識颈渊，一般是url + 參數(shù)名 + 請求方法，當然你可以自己定義
pending.push({ u: config.url.split('?')[0] +'&' + config.method, f: c});//config.data為請求參數(shù)
});
/*.....*/
})
image.png
