真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

使用Axios攔截器解決前端并發(fā)沖突

這篇文章主要講解了“使用Axios攔截器解決前端并發(fā)沖突”,文中的講解內(nèi)容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“使用Axios攔截器解決前端并發(fā)沖突”吧!

創(chuàng)新互聯(lián)公司服務項目包括伊通網(wǎng)站建設、伊通網(wǎng)站制作、伊通網(wǎng)頁制作以及伊通網(wǎng)絡營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等,向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,伊通網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務的客戶以成都為中心已經(jīng)輻射到伊通省份的部分城市,未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任!

背景

并發(fā)沖突問題, 是日常開發(fā)中一個比較常見的問題。

不同用戶在較短時間間隔內(nèi)變更數(shù)據(jù),或者某一個用戶進行的重復提交操作都可能導致并發(fā)沖突。

并發(fā)場景在開發(fā)和測試階段難以排查全面,出現(xiàn)線上 bug 以后定位困難,因此做好并發(fā)控制是前后端開發(fā)過程中都需要重視的問題。

對于同一用戶短時間內(nèi)重復提交數(shù)據(jù)的問題,前端通常可以先做一層攔截。

本文將討論前端如何利用 axios 的攔截器過濾重復請求,解決并發(fā)沖突。

一般的處理方式 — 每次發(fā)請求添加 loading

在嘗試 axios 攔截器之前,先看看我們之前業(yè)務是怎么處理并發(fā)沖突問題的:

每次用戶操作頁面上的控件(輸入框、按鈕等),向后端發(fā)送請求的時候,都給頁面對應的控件添加 loading 效果,提示正在進行數(shù)據(jù)加載,同時也阻止  loading 效果結(jié)束前用戶繼續(xù)操作控件。

這是最直接有效的方式,如果你們前端團隊成員足夠細心耐心,擁有良好的編碼習慣,這樣就可以解決大部分用戶不小心重復提交帶來的并發(fā)問題了。

更優(yōu)的解決方案:axios 攔截器統(tǒng)一處理

項目中需要前端限制并發(fā)的場景這么多,我們當然要思考更優(yōu)更省事的方案。

既然是在每次發(fā)送請求的時候進行并發(fā)控制,那如果能重新封裝下發(fā)請求的公共函數(shù),統(tǒng)一處理重復請求實現(xiàn)自動攔截,就可以大大簡化我們的業(yè)務代碼。

項目使用的 axios 庫來發(fā)送 http 請求,axios 官方為我們提供了豐富的 API,我們來看看攔截請求需要用到的兩個核心 API:

1. interceptors

攔截器包括請求攔截器和響應攔截器,可以在請求發(fā)送前或者響應后進行攔截處理,用法如下:

// 添加請求攔截器 axios.interceptors.request.use(function (config) {   // 在發(fā)送請求之前做些什么   return config; }, function (error) {   // 對請求錯誤做些什么   return Promise.reject(error); });  // 添加響應攔截器 axios.interceptors.response.use(function (response) {     // 對響應數(shù)據(jù)做點什么     return response;   }, function (error) {     // 對響應錯誤做點什么     return Promise.reject(error);   });

2. cancel token:

調(diào)用 cancel token API 可以取消請求。

官網(wǎng)提供了兩種方式來構(gòu)建 cancel token,我們采用這種方式:

通過傳遞一個 executor 函數(shù)到 CancelToken 的構(gòu)造函數(shù)來創(chuàng)建 cancel  token,方便在上面的請求攔截器中檢測到重復請求可以立即執(zhí)行:

const CancelToken = axios.CancelToken; let cancel;  axios.get('/user/12345', {   cancelToken: new CancelToken(function executor(c) {     // executor 函數(shù)接收一個 cancel 函數(shù)作為參數(shù)     cancel = c;   }) });  // cancel the request cancel();

本文提供的思路就是利用 axios interceptors API 攔截請求,檢測是否有多個相同的請求同時處于 pending 狀態(tài),如果有就調(diào)用  cancel token API 取消重復的請求。

假如用戶重復點擊按鈕,先后提交了 A 和 B 這兩個完全相同(考慮請求路徑、方法、參數(shù))的請求,我們可以從以下幾種攔截方案中選擇其一:

  • 取消 A 請求,只發(fā)出 B 請求

  • 取消 B 請求,只發(fā)出 A 請求

  • 取消 B 請求,只發(fā)出 A 請求,把收到的 A 請求的返回結(jié)果也作為 B 請求的返回結(jié)果

第三種方案需要做監(jiān)聽處理增加了復雜性,結(jié)合我們實際的業(yè)務需求,最后采用了第二種方案來實現(xiàn),即:

只發(fā)第一個請求。在 A 請求還處于 pending 狀態(tài)時,后發(fā)的所有與 A 重復的請求都取消,實際只發(fā)出 A 請求,直到 A  請求結(jié)束(成功/失敗)才停止對這個請求的攔截。

具體實現(xiàn)

1.存儲所有 pending 狀態(tài)的請求

首先我們要將項目中所有的 pending 狀態(tài)的請求存儲在一個變量中,叫它 pendingRequests,

可以通過把 axios 封裝為一個單例模式的類,或者定義全局變量,來保證  pendingRequests變量在每次發(fā)送請求前都可以訪問,并檢查是否為重復的請求。

let pendingRequests = new Map()

把每個請求的方法、url 和參數(shù)組合成一個字符串,作為標識該請求的唯一 key,同時也是 pendingRequests 對象的 key:

const requestKey = `${config.url}/${JSON.stringify(config.params)}/${JSON.stringify(config.data)}&request_type=${config.method}`;

幫助理解的小 tips:

  • 定義 pendingRequests 為 map 對象的目的是為了方便我們查詢它是否包含某個 key,以及添加和刪除 key。添加 key 時,對應的  value 可以設置用戶自定義的一些功能參數(shù),后面擴展功能的時候會用到。

  • config 是 axios 攔截器中的參數(shù),包含當前請求的信息

2.在請求發(fā)出前檢查當前請求是否重復

在請求攔截器中,生成上面的 requestKey,檢查 pendingRequests 對象中是否包含當前請求的 requestKey

  • 有:說明是重復的請求,cancel 掉當前請求

  • 沒有:把 requestKey 添加到 pendingRequests 對象中

因為后面的響應攔截器中還要用到當前請求的 requestKey,為了避免踩坑,最好不要再次生成。

在這一步就把 requestKey 存回 axios 攔截器的 config 參數(shù)中,后面可以直接在響應攔截器中通過  response.config.requestKey 取到。

代碼示例:

// 請求攔截器 axios.interceptors.request.use(   (config) => {     if (pendingRequests.has(requestKey)) {       config.cancelToken = new axios.CancelToken((cancel) => {         // cancel 函數(shù)的參數(shù)會作為 promise 的 error 被捕獲         cancel(`重復的請求被主動攔截: ${requestKey}`);       });     } else {       pendingRequests.set(requestKey, config);       config.requestKey = requestKey;     }     return config;   },   (error) => {     // 這里出現(xiàn)錯誤可能是網(wǎng)絡波動造成的,清空 pendingRequests 對象     pendingRequests.clear();     return Promise.reject(error);   } );

3.在請求返回后維護 pendingRequests 對象

如果請求順利走到了響應攔截器這一步,說明這個請求已經(jīng)結(jié)束了 pending 狀態(tài),那我們要把它從 pendingRequests 中除名:

axios.interceptors.response.use((response) => {   const requestKey = response.config.requestKey;   pendingRequests.delete(requestKey);   return Promise.resolve(response); }, (error) => {   if (axios.isCancel(error)) {     console.warn(error);     return Promise.reject(error);   }   pendingRequests.clear();   return Promise.reject(error); })

4.需要清空 pendingRequests 對象的場景

遇到網(wǎng)絡波動或者超時等情況造成請求錯誤時,需要清空原來存儲的所有 pending 狀態(tài)的請求記錄,在上面演示的代碼已經(jīng)作了注釋說明。

此外,頁面切換時也需要清空之前緩存的 pendingRequests 對象,可以利用 Vue Router 的 beforeEach 鉤子:

router.beforeEach((to, from, next) => {   request.clearRequestList();   next(); });

功能擴展

1.統(tǒng)一處理接口報錯提示

與后端約定好接口返回數(shù)據(jù)的格式,對接口報錯的情況,可以統(tǒng)一在響應攔截器中添加 toast 給用戶提示,

對于特殊的不需要報錯的接口,可以設置一個參數(shù)存入 axios 攔截器的 config 參數(shù)中,過濾掉報錯提示:

// 接口返回 retcode 不為 0 時需要報錯,請求設置了 noError 為 true 則這個接口不報錯  if (   response.data.retcode &&   !response.config.noError ) {   if (response.data.message) {     Vue.prototype.$message({       showClose: true,       message: response.data.message,       type: 'error',     });   }   return Promise.reject(response.data); }

2.發(fā)送請求時給控件添加 loading 效果

上面利用 axios interceptors 過濾重復請求時,可以在控制臺拋出信息給開發(fā)者提示,在這個基礎上如果能給頁面上操作的控件添加 loading  效果就會對用戶更友好。

常見的 ui 組件庫都有提供 loading 服務,可以指定頁面上需要添加 loading 效果的控件。下面是以 element UI  為例的示例代碼:

// 給 loadingTarget 對應的控件添加 loading 效果,儲存 loadingService 實例 addLoading(config) {   if (!document.querySelector(config.loadingTarget)) return;   config.loadingService = Loading.service({     target: config.loadingTarget,   }); }  // 調(diào)用 loadingService 實例的 close 方法關閉對應元素的 loading 效果 closeLoading(config) {   config.loadingService && config.loadingService.close(); }

與上面過濾報錯方式類似,發(fā)請求的時候?qū)⒃氐?class name 或 id 存入 axios 攔截器的 config 參數(shù)中,

在請求攔截器中調(diào)用 addLoading 方法, 響應攔截器中調(diào)用 closeLoading 方法,就可以實現(xiàn)在請求 pending 過程中指定控件(如  button) loading,請求結(jié)束后控件自動取消 loading 效果。

支持多個攔截器組合使用

簡單看下 axios interceptors 部分實現(xiàn)源碼可以理解,它支持定義多個 interceptors,所以只要我們定義的  interceptors 符合 Promise.then 鏈式調(diào)用的規(guī)范,還可以添加更多功能:

this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {   chain.unshift(interceptor.fulfilled, interceptor.rejected); });  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {   chain.push(interceptor.fulfilled, interceptor.rejected); });  while (chain.length) {   promise = promise.then(chain.shift(), chain.shift()); }

總結(jié)

并發(fā)問題很常見,處理起來又相對繁瑣,前端解決并發(fā)沖突時,可以利用 axios 攔截器統(tǒng)一處理重復請求,簡化業(yè)務代碼。

同時 axios 攔截器支持更多應用,本文提供了部分常用擴展功能的實現(xiàn),感興趣的同學可以繼續(xù)挖掘補充攔截器的其他用法。

感謝各位的閱讀,以上就是“使用Axios攔截器解決前端并發(fā)沖突”的內(nèi)容了,經(jīng)過本文的學習后,相信大家對使用Axios攔截器解決前端并發(fā)沖突這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關知識點的文章,歡迎關注!


文章標題:使用Axios攔截器解決前端并發(fā)沖突
網(wǎng)頁URL:http://weahome.cn/article/ggdpdj.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部