在實際開發中，可能會遇到網絡問題或者查詢量比較大的情況，上一個請求還沒有完成，用戶就發起了下一個請求。

但是同一個請求多次發送到服務器，無疑是對服務器的一種壓力，所以需要在已經優化服務器過查詢速度后，以及用戶網絡情況比較差的條件下，在前端進行請求限制。

axios 自帶的cancelToken可以幫我們實現這個需求，并且提供給了我們一個現成的api axios.CancelToken ，這是一個返回值是帶有請求信息的回調函數，我們可以在需要cancel的時候去執行這個回調函數。具體實現如下：

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，如果有就不用重新創建一個cancelToken。 removePendding 中判斷請求信息是否在Map中，如果該請求存在于Map中，則執行cancel函數，并刪除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進行捕獲 }))

這里攔截成功后，就可以限制住大流量的多次請求。

這里只是一個例子，也可以通過判斷按鈕邏輯來控制用戶是否發起請求。

到此這篇關于js實現axios限制請求隊列的文章就介紹到這了,更多相關js axios限制請求隊列內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！