欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)axios限制請求隊列

 更新時間:2021年07月23日 08:39:32   作者:Tzyito  
本文主要介紹了js實現(xiàn)axios限制請求隊列,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

背景是:

在實際開發(fā)中,可能會遇到網(wǎng)絡(luò)問題或者查詢量比較大的情況,上一個請求還沒有完成,用戶就發(fā)起了下一個請求。

會造成什么情況呢?

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

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

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

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 = '上一請求尚未結(jié)束,稍等~';
    Message.error(error.message);
    return Promise.reject(error.response) 
  // 這里拋出需要注意,在請求時調(diào)用try-catch進行捕獲
  })
)

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

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

到此這篇關(guān)于js實現(xiàn)axios限制請求隊列的文章就介紹到這了,更多相關(guān)js axios限制請求隊列內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論