使用 axios 攔截器解決「 前端并發(fā)沖突 」 問題
大廠技術(shù) 高級前端 Node進階
點擊上方 程序員成長指北，關(guān)注公眾號
回復1，加入高級Node交流群
背景
并發(fā)沖突問題， 是日常開發(fā)中一個比較常見的問題。
不同用戶在較短時間間隔內(nèi)變更數(shù)據(jù)，或者某一個用戶進行的重復提交操作都可能導致并發(fā)沖突。
并發(fā)場景在開發(fā)和測試階段難以排查全面，出現(xiàn)線上 bug 以后定位困難，因此做好并發(fā)控制是前后端開發(fā)過程中都需要重視的問題。
對于同一用戶短時間內(nèi)重復提交數(shù)據(jù)的問題，前端通?？梢韵茸鲆粚訑r截。
本文將討論前端如何利用 axios 的攔截器過濾重復請求，解決并發(fā)沖突。
一般的處理方式 — 每次發(fā)請求添加 loading
在嘗試 axios 攔截器之前，先看看我們之前業(yè)務(wù)是怎么處理并發(fā)沖突問題的：
每次用戶操作頁面上的控件（輸入框、按鈕等），向后端發(fā)送請求的時候，都給頁面對應(yīng)的控件添加 loading 效果，提示正在進行數(shù)據(jù)加載，同時也阻止 loading 效果結(jié)束前用戶繼續(xù)操作控件。
這是最直接有效的方式，如果你們前端團隊成員足夠細心耐心，擁有良好的編碼習慣，這樣就可以解決大部分用戶不小心重復提交帶來的并發(fā)問題了。
更優(yōu)的解決方案：axios 攔截器統(tǒng)一處理
項目中需要前端限制并發(fā)的場景這么多，我們當然要思考更優(yōu)更省事的方案。
既然是在每次發(fā)送請求的時候進行并發(fā)控制，那如果能重新封裝下發(fā)請求的公共函數(shù)，統(tǒng)一處理重復請求實現(xiàn)自動攔截，就可以大大簡化我們的業(yè)務(wù)代碼。
項目使用的 axios 庫來發(fā)送 http 請求，axios 官方為我們提供了豐富的 API，我們來看看攔截請求需要用到的兩個核心 API:
1. interceptors
攔截器包括請求攔截器和響應(yīng)攔截器，可以在請求發(fā)送前或者響應(yīng)后進行攔截處理，用法如下：
// 添加請求攔截器
axios.interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
// 對響應(yīng)數(shù)據(jù)做點什么
return response;
}, function (error) {
// 對響應(yīng)錯誤做點什么
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è)務(wù)需求，最后采用了第二種方案來實現(xiàn)，即：
只發(fā)第一個請求。在 A 請求還處于 pending 狀態(tài)時，后發(fā)的所有與 A 重復的請求都取消，實際只發(fā)出 A 請求，直到 A 請求結(jié)束（成功/失?。┎磐Ｖ箤@個請求的攔截。
具體實現(xiàn)
-
存儲所有 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 時，對應(yīng)的 value 可以設(shè)置用戶自定義的一些功能參數(shù)，后面擴展功能的時候會用到。 -
config是axios攔截器中的參數(shù)，包含當前請求的信息
-
在請求發(fā)出前檢查當前請求是否重復
在請求攔截器中，生成上面的
requestKey，檢查pendingRequests對象中是否包含當前請求的requestKey -
有：說明是重復的請求，cancel 掉當前請求 -
沒有：把 requestKey添加到pendingRequests對象中
因為后面的響應(yīng)攔截器中還要用到當前請求的 requestKey，為了避免踩坑，最好不要再次生成。
在這一步就把 requestKey 存回 axios 攔截器的 config 參數(shù)中，后面可以直接在響應(yīng)攔截器中通過 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)絡(luò)波動造成的，清空 pendingRequests 對象
pendingRequests.clear();
return Promise.reject(error);
}
);
-
在請求返回后維護 pendingRequests對象
如果請求順利走到了響應(yīng)攔截器這一步，說明這個請求已經(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);
})
-
需要清空 pendingRequests對象的場景
遇到網(wǎng)絡(luò)波動或者超時等情況造成請求錯誤時，需要清空原來存儲的所有 pending 狀態(tài)的請求記錄，在上面演示的代碼已經(jīng)作了注釋說明。
此外，頁面切換時也需要清空之前緩存的 pendingRequests 對象，可以利用 Vue Router 的 beforeEach 鉤子：
router.beforeEach((to, from, next) => {
request.clearRequestList();
next();
});
功能擴展
-
統(tǒng)一處理接口報錯提示
與后端約定好接口返回數(shù)據(jù)的格式，對接口報錯的情況，可以統(tǒng)一在響應(yīng)攔截器中添加 toast 給用戶提示，
對于特殊的不需要報錯的接口，可以設(shè)置一個參數(shù)存入 axios 攔截器的 config 參數(shù)中，過濾掉報錯提示:
// 接口返回 retcode 不為 0 時需要報錯，請求設(shè)置了 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);
}
-
發(fā)送請求時給控件添加 loading 效果
上面利用 axios interceptors 過濾重復請求時，可以在控制臺拋出信息給開發(fā)者提示，在這個基礎(chǔ)上如果能給頁面上操作的控件添加 loading 效果就會對用戶更友好。
常見的 ui 組件庫都有提供 loading 服務(wù)，可以指定頁面上需要添加 loading 效果的控件。下面是以 element UI 為例的示例代碼：
// 給 loadingTarget 對應(yīng)的控件添加 loading 效果，儲存 loadingService 實例
addLoading(config) {
if (!document.querySelector(config.loadingTarget)) return;
config.loadingService = Loading.service({
target: config.loadingTarget,
});
}
// 調(diào)用 loadingService 實例的 close 方法關(guān)閉對應(yīng)元素的 loading 效果
closeLoading(config) {
config.loadingService && config.loadingService.close();
}
與上面過濾報錯方式類似，發(fā)請求的時候?qū)⒃氐?class name 或 id 存入 axios 攔截器的 config 參數(shù)中，
在請求攔截器中調(diào)用 addLoading 方法, 響應(yīng)攔截器中調(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è)務(wù)代碼。
同時 axios 攔截器支持更多應(yīng)用，本文提供了部分常用擴展功能的實現(xiàn)，感興趣的同學可以繼續(xù)挖掘補充攔截器的其他用法。
今天的內(nèi)容就這么多，希望對你有幫助。
Node 社群
我組建了一個氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學習感興趣的話（后續(xù)有計劃也可以），我們可以一起進行Node.js相關(guān)的交流、學習、共建。下方加 考拉 好友回復「Node」即可。
“分享、點贊、在看” 支持一下