建站
咨詢
售后
建站咨詢
新聞中心
背景
并發(fā)沖突問題， 是日常開發(fā)中一個比較常見的問題。
不同用戶在較短時間間隔內變更數據，或者某一個用戶進行的重復提交操作都可能導致并發(fā)沖突。
并發(fā)場景在開發(fā)和測試階段難以排查全面，出現線上 bug 以后定位困難，因此做好并發(fā)控制是前后端開發(fā)過程中都需要重視的問題。
對于同一用戶短時間內重復提交數據的問題，前端通常可以先做一層攔截。
本文將討論前端如何利用 axios 的攔截器過濾重復請求，解決并發(fā)沖突。
一般的處理方式 — 每次發(fā)請求添加 loading
在嘗試 axios 攔截器之前，先看看我們之前業(yè)務是怎么處理并發(fā)沖突問題的：
每次用戶操作頁面上的控件(輸入框、按鈕等)，向后端發(fā)送請求的時候，都給頁面對應的控件添加 loading 效果，提示正在進行數據加載，同時也阻止 loading 效果結束前用戶繼續(xù)操作控件。
這是最直接有效的方式，如果你們前端團隊成員足夠細心耐心，擁有良好的編碼習慣，這樣就可以解決大部分用戶不小心重復提交帶來的并發(fā)問題了。
更優(yōu)的解決方案：axios 攔截器統(tǒng)一處理
項目中需要前端限制并發(fā)的場景這么多，我們當然要思考更優(yōu)更省事的方案。
既然是在每次發(fā)送請求的時候進行并發(fā)控制，那如果能重新封裝下發(fā)請求的公共函數，統(tǒng)一處理重復請求實現自動攔截，就可以大大簡化我們的業(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) {
- // 對響應數據做點什么
- return response;
- }, function (error) {
- // 對響應錯誤做點什么
- return Promise.reject(error);
- });
2. cancel token:
調用 cancel token API 可以取消請求。
官網提供了兩種方式來構建 cancel token，我們采用這種方式：
通過傳遞一個 executor 函數到 CancelToken 的構造函數來創(chuàng)建 cancel token，方便在上面的請求攔截器中檢測到重復請求可以立即執(zhí)行:
- const CancelToken = axios.CancelToken;
- let cancel;
- axios.get('/user/12345', {
- cancelToken: new CancelToken(function executor(c) {
- // executor 函數接收一個 cancel 函數作為參數
- cancel = c;
- })
- });
- // cancel the request
- cancel();
本文提供的思路就是利用 axios interceptors API 攔截請求，檢測是否有多個相同的請求同時處于 pending 狀態(tài)，如果有就調用 cancel token API 取消重復的請求。
假如用戶重復點擊按鈕，先后提交了 A 和 B 這兩個完全相同(考慮請求路徑、方法、參數)的請求，我們可以從以下幾種攔截方案中選擇其一：
- 取消 A 請求，只發(fā)出 B 請求
- 取消 B 請求，只發(fā)出 A 請求
- 取消 B 請求，只發(fā)出 A 請求，把收到的 A 請求的返回結果也作為 B 請求的返回結果
第三種方案需要做監(jiān)聽處理增加了復雜性，結合我們實際的業(yè)務需求，最后采用了第二種方案來實現，即：
只發(fā)第一個請求。在 A 請求還處于 pending 狀態(tài)時，后發(fā)的所有與 A 重復的請求都取消，實際只發(fā)出 A 請求，直到 A 請求結束(成功/失敗)才停止對這個請求的攔截。
具體實現
1.存儲所有 pending 狀態(tài)的請求
首先我們要將項目中所有的 pending 狀態(tài)的請求存儲在一個變量中，叫它 pendingRequests，
可以通過把 axios 封裝為一個單例模式的類，或者定義全局變量，來保證 pendingRequests變量在每次發(fā)送請求前都可以訪問，并檢查是否為重復的請求。
- let pendingRequests = new Map()
把每個請求的方法、url 和參數組合成一個字符串，作為標識該請求的唯一 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 可以設置用戶自定義的一些功能參數，后面擴展功能的時候會用到。
- config 是 axios 攔截器中的參數，包含當前請求的信息
2.在請求發(fā)出前檢查當前請求是否重復
在請求攔截器中，生成上面的 requestKey，檢查 pendingRequests 對象中是否包含當前請求的 requestKey
- 有：說明是重復的請求，cancel 掉當前請求
- 沒有：把 requestKey 添加到 pendingRequests 對象中
因為后面的響應攔截器中還要用到當前請求的 requestKey，為了避免踩坑，最好不要再次生成。
在這一步就把 requestKey 存回 axios 攔截器的 config 參數中，后面可以直接在響應攔截器中通過 response.config.requestKey 取到。
代碼示例：
- // 請求攔截器
- axios.interceptors.request.use(
- (config) => {
- if (pendingRequests.has(requestKey)) {
- config.cancelToken = new axios.CancelToken((cancel) => {
- // cancel 函數的參數會作為 promise 的 error 被捕獲
- cancel(`重復的請求被主動攔截: ${requestKey}`);
- });
- } else {
- pendingRequests.set(requestKey, config);
- config.requestKey = requestKey;
- }
- return config;
- },
- (error) => {
- // 這里出現錯誤可能是網絡波動造成的，清空 pendingRequests 對象
- pendingRequests.clear();
- return Promise.reject(error);
- }
- );
3.在請求返回后維護 pendingRequests 對象
如果請求順利走到了響應攔截器這一步，說明這個請求已經結束了 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 對象的場景
遇到網絡波動或者超時等情況造成請求錯誤時，需要清空原來存儲的所有 pending 狀態(tài)的請求記錄，在上面演示的代碼已經作了注釋說明。
此外，頁面切換時也需要清空之前緩存的 pendingRequests 對象，可以利用 Vue Router 的 beforeEach 鉤子：
- router.beforeEach((to, from, next) => {
- request.clearRequestList();
- next();
- });
功能擴展
1.統(tǒng)一處理接口報錯提示
與后端約定好接口返回數據的格式，對接口報錯的情況，可以統(tǒng)一在響應攔截器中添加 toast 給用戶提示，
對于特殊的不需要報錯的接口，可以設置一個參數存入 axios 攔截器的 config 參數中，過濾掉報錯提示:
- // 接口返回 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,
- });
- }
- // 調用 loadingService 實例的 close 方法關閉對應元素的 loading 效果
- closeLoading(config) {
- config.loadingService && config.loadingService.close();
- }
與上面過濾報錯方式類似，發(fā)請求的時候將元素的 class name 或 id 存入 axios 攔截器的 config 參數中，
在請求攔截器中調用 addLoading 方法, 響應攔截器中調用 closeLoading 方法，就可以實現在請求 pending 過程中指定控件(如 button) loading，請求結束后控件自動取消 loading 效果。
支持多個攔截器組合使用
簡單看下 axios interceptors 部分實現源碼可以理解，它支持定義多個 interceptors，所以只要我們定義的 interceptors 符合 Promise.then 鏈式調用的規(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());
- }
總結
并發(fā)問題很常見，處理起來又相對繁瑣，前端解決并發(fā)沖突時，可以利用 axios 攔截器統(tǒng)一處理重復請求，簡化業(yè)務代碼。
同時 axios 攔截器支持更多應用，本文提供了部分常用擴展功能的實現，感興趣的同學可以繼續(xù)挖掘補充攔截器的其他用法。
今天的內容就這么多，希望對你有幫助。
本文標題：使用Axios攔截器解決「前端并發(fā)沖突」問題
鏈接地址：http://m.5511xx.com/article/dhosddj.html
