js實現(xiàn)axios限制請求隊列
更新時間：2021年07月23日 08:39:32 作者：Tzyito
本文主要介紹了js實現(xiàn)axios限制請求隊列，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧
背景是：
在實際開發(fā)中，可能會遇到網(wǎng)絡問題或者查詢量比較大的情況，上一個請求還沒有完成，用戶就發(fā)起了下一個請求。
會造成什么情況呢？
但是同一個請求多次發(fā)送到服務器，無疑是對服務器的一種壓力，所以需要在已經優(yōu)化服務器過查詢速度后，以及用戶網(wǎng)絡情況比較差的條件下，在前端進行請求限制。
axios 自帶的cancelToken可以幫我們實現(xiàn)這個需求，并且提供給了我們一個現(xiàn)成的api axios.CancelToken ，這是一個返回值是帶有請求信息的回調函數(shù)，我們可以在需要cancel的時候去執(zhí)行這個回調函數(shù)。具體實現(xiàn)如下：
const service = axios.create({});
const penddingMap = new Map();
const addPendding = (config) => {
config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
if(!penddingMap.has(config.url)){
penddingMap.set(config.url,cancel);
}
})
}
const removePendding = (config) => {
if(penddingMap.has(config.url)){
let cancel = penddingMap.get(config.url);
cancel(config.url);
penddingMap.delete(config.url)
}
}
本地維護一個Map來存儲每個請求信息， addPendding 中每次會去先判斷是否有cancelToken，如果有就不用重新創(chuàng)建一個cancelToken。 removePendding 中判斷請求信息是否在Map中，如果該請求存在于Map中，則執(zhí)行cancel函數(shù)，并刪除Map中的該請求。
攔截器中的具體應用：
service.interceptors.request.use(config => {
removePending(config) // 如果存在Map中先cancel該請求
addPendding(config) // 添加該請求到Map中
return config
})
service.interceptors.response.use(response => {
``` // some code
return response.data
}，error => {
// 捕獲cancel請求并拋出
if(error instanceof Cancel){
error.message = '上一請求尚未結束，稍等~';
Message.error(error.message);
return Promise.reject(error.response)
// 這里拋出需要注意，在請求時調用try-catch進行捕獲
})
)
這里攔截成功后，就可以限制住大流量的多次請求。
這里只是一個例子，也可以通過判斷按鈕邏輯來控制用戶是否發(fā)起請求。
到此這篇關于js實現(xiàn)axios限制請求隊列的文章就介紹到這了,更多相關js axios限制請求隊列內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Bootstrap實現(xiàn)下拉菜單效果的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
本文主要介紹了代碼優(yōu)化頁面加載速度的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章介紹了js局部刷新頁面時間具體實現(xiàn)，需要的朋友可以參考一下2013-07-07
js的屬性名可以使用變量，例如js對象object,當賦給該對象屬性的時候可以采用以下方式，比較實用，需要的朋友可以看看2014-10-10
這篇文章主要為大家介紹了JS?中Proxy代理和?Reflect反射方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
超越Jquery_01_isPlainObject分析與重構
isPlainObject是Jquery1.4后提供的新方法,用于判斷對象是否是純粹的對象（通過 {} 或者 new Object 創(chuàng)建的）。2010-10-10
JavaScript動態(tài)序列比對代碼，隨便 寫著玩的，在網(wǎng)上見到用VC、VB寫的比較多，這個算法以前在高中課本上見到過，我只是用Js寫一下試試，或許還不是太準確。2010-07-07
在本篇文章里我們給大家分享了關于js訪問對象的屬性和方法的相關知識點，有需要的朋友們可以學習下。2018-10-10
Javascript的異步函數(shù)和Promise對象你了解嗎
這篇文章主要為大家詳細介紹了Javascript異步函數(shù)和Promise對象，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
javascript 手動給表增加數(shù)據(jù)的小例子
這篇文章介紹了js手動給表增加數(shù)據(jù)的實例代碼，有需要的朋友可以參考一下2013-07-07