背景

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

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

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

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

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

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

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

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

調用 cancel token API 可以取消請求。

官網(wǎng)提供了兩種方式來構建 cancel token，我們采用這種方式：

通過傳遞一個 executor 函數(shù)到 CancelToken 的構造函數(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)，如果有就調用 cancel token API 取消重復的請求。

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

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

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

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

具體實現(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)結束了 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, 
  }); 
} 
 
// 調用 loadingService 實例的 close 方法關閉對應元素的 loading 效果 
closeLoading(config) { 
  config.loadingService && config.loadingService.close(); 
} 

與上面過濾報錯方式類似，發(fā)請求的時候將元素的 class name 或 id 存入 axios 攔截器的 config 參數(shù)中，

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

支持多個攔截器組合使用

簡單看下 axios interceptors 部分實現(xiàn)源碼可以理解，它支持定義多個 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 攔截器支持更多應用，本文提供了部分常用擴展功能的實現(xiàn)，感興趣的同學可以繼續(xù)挖掘補充攔截器的其他用法。

今天的內容就這么多，希望對你有幫助。