js實(shí)現(xiàn)axios限制請(qǐng)求隊(duì)列
背景是:
在實(shí)際開(kāi)發(fā)中,可能會(huì)遇到網(wǎng)絡(luò)問(wèn)題或者查詢量比較大的情況,上一個(gè)請(qǐng)求還沒(méi)有完成,用戶就發(fā)起了下一個(gè)請(qǐng)求。
會(huì)造成什么情況呢?
但是同一個(gè)請(qǐng)求多次發(fā)送到服務(wù)器,無(wú)疑是對(duì)服務(wù)器的一種壓力,所以需要在已經(jīng)優(yōu)化服務(wù)器過(guò)查詢速度后,以及用戶網(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)控制用戶是否發(fā)起請(qǐng)求。
到此這篇關(guān)于js實(shí)現(xiàn)axios限制請(qǐng)求隊(duì)列的文章就介紹到這了,更多相關(guān)js axios限制請(qǐng)求隊(duì)列內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
這篇文章主要介紹了IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法,大家參考使用吧2013-11-11基于JavaScript實(shí)現(xiàn)輪播圖原理及示例
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)輪播圖原理及示例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02javascript+HTML5的canvas實(shí)現(xiàn)七夕情人節(jié)3D玫瑰花效果代碼
這篇文章主要介紹了javascript+HTML5的canvas實(shí)現(xiàn)七夕情人節(jié)3D玫瑰花效果代碼,使用了html5的canvas技術(shù),可呈現(xiàn)出帶有3D效果的玫瑰花漸顯效果,非常逼真自然,需要的朋友可以參考下2015-08-08JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法的相關(guān)資料,layer是layui的一個(gè)彈出層組件,但是可以作為獨(dú)立組件使用,需要的朋友可以參考下2023-10-10基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理
這篇文章主要介紹了基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理的相關(guān)資料,小編認(rèn)為非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05原生JavaScript創(chuàng)建不可變對(duì)象的方法簡(jiǎn)單示例
這篇文章主要介紹了原生JavaScript創(chuàng)建不可變對(duì)象的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了基于原生JavaScript創(chuàng)建不可變對(duì)象的相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05js數(shù)組高階函數(shù)之includes()方法總結(jié)
JS的數(shù)組是一種特殊的對(duì)象,其特點(diǎn)是在值的列表中按照順序存放值,在 JS中,數(shù)組是由中括號(hào) [] 括起來(lái)的數(shù)值序列,本篇文章給大家介紹js數(shù)組高階函數(shù)——includes()方法,感興趣的朋友一起看看吧2023-12-12