在實(shí)際開(kāi)發(fā)中，可能會(huì)遇到網(wǎng)絡(luò)問(wèn)題或者查詢(xún)量比較大的情況，上一個(gè)請(qǐng)求還沒(méi)有完成，用戶(hù)就發(fā)起了下一個(gè)請(qǐng)求。

但是同一個(gè)請(qǐng)求多次發(fā)送到服務(wù)器，無(wú)疑是對(duì)服務(wù)器的一種壓力，所以需要在已經(jīng)優(yōu)化服務(wù)器過(guò)查詢(xún)速度后，以及用戶(hù)網(wǎng)絡(luò)情況比較差的條件下，在前端進(jìn)行請(qǐng)求限制。

axios 自帶的cancelToken可以幫我們實(shí)現(xiàn)這個(gè)需求，并且提供給了我們一個(gè)現(xiàn)成的api axios.CancelToken ，這是一個(gè)返回值是帶有請(qǐng)求信息的回調(diào)函數(shù)，我們可以在需要cancel的時(shí)候去執(zhí)行這個(gè)回調(diào)函數(shù)。具體實(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) }}

本地維護(hù)一個(gè)Map來(lái)存儲(chǔ)每個(gè)請(qǐng)求信息， addPendding 中每次會(huì)去先判斷是否有cancelToken，如果有就不用重新創(chuàng)建一個(gè)cancelToken。 removePendding 中判斷請(qǐng)求信息是否在Map中，如果該請(qǐng)求存在于Map中，則執(zhí)行cancel函數(shù)，并刪除Map中的該請(qǐng)求。

攔截器中的具體應(yīng)用：

service.interceptors.request.use(config => { removePending(config) // 如果存在Map中先cancel該請(qǐng)求 addPendding(config) // 添加該請(qǐng)求到Map中 return config})service.interceptors.response.use(response => { ``` // some code return response.data}，error => { // 捕獲cancel請(qǐng)求并拋出 if(error instanceof Cancel){ error.message = ’上一請(qǐng)求尚未結(jié)束，稍等~’; Message.error(error.message); return Promise.reject(error.response) // 這里拋出需要注意，在請(qǐng)求時(shí)調(diào)用try-catch進(jìn)行捕獲 }))

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

這里只是一個(gè)例子，也可以通過(guò)判斷按鈕邏輯來(lái)控制用戶(hù)是否發(fā)起請(qǐng)求。

到此這篇關(guān)于js實(shí)現(xiàn)axios限制請(qǐng)求隊(duì)列的文章就介紹到這了,更多相關(guān)js axios限制請(qǐng)求隊(duì)列內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！