axios如何取消重複請求

在開發中，常常會遇到接口重複請求致使的各類問題。

對於重複的get請求，會致使頁面更新屢次，發生頁面抖動的現象，影響用戶體驗。

對於重複的post請求，會致使在服務端生成兩次記錄（例如生成兩條訂單記錄）。

若是當前頁面請求還未響應完成，就切換到了下一個路由，那麼這些請求直到響應返回纔會停止。

不管從用戶體驗或者從業務嚴謹方面來講，取消無用的請求確實是須要避免的。

固然咱們能夠經過頁面loading來避免用戶進行下一次的操做，但本文只討論單純的如何取消這些無用的請求。

axios 的 cancelToken

axios是一個主流的http請求庫，它提供了兩種取消請求的方式。

• 經過axios.CancelToken.source生成取消令牌token和取消方法cancel

  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();
  
  axios.get('/user/12345', {
    cancelToken: source.token
  }).catch(function(thrown) {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      // handle error
    }
  });
  
  axios.post('/user/12345', {
    name: 'new name'
  }, {
    cancelToken: source.token
  })
  
  // cancel the request (the message parameter is optional)
  source.cancel('Operation canceled by the user.');

• 經過axios.CancelToken構造函數生成取消函數

  const CancelToken = axios.CancelToken;
  let cancel;
  
  axios.get('/user/12345', {
    cancelToken: new CancelToken(function executor(c) {
      // An executor function receives a cancel function as a parameter
      cancel = c;
    })
  });
  
  // cancel the request
  cancel();

須要注意的是在 catch中捕獲異常時，應該使用 axios.isCancel()判斷當前請求是不是主動取消的，以此來區分普通的異常邏輯。

封裝取消請求邏輯

上面有兩種取消請求，用哪一種都是能夠的，這裏使用第二種。

取消請求主要有兩個場景：

• 當請求方式method，請求路徑url，請求參數（get爲params，post爲data）都相同時，能夠視爲同一個請求發送了屢次，須要取消以前的請求
• 當路由切換時，須要取消上個路由中未完成的請求

咱們封裝幾個方法：

// 聲明一個 Map 用於存儲每一個請求的標識 和 取消函數
const pending = new Map()
/**
 * 添加請求
 * @param {Object} config 
 */
const addPending = (config) => {
  const url = [
    config.method,
    config.url,
    qs.stringify(config.params),
    qs.stringify(config.data)
  ].join('&')
  config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
    if (!pending.has(url)) { // 若是 pending 中不存在當前請求，則添加進去
      pending.set(url, cancel)
    }
  })
}
/**
 * 移除請求
 * @param {Object} config 
 */
const removePending = (config) => {
  const url = [
    config.method,
    config.url,
    qs.stringify(config.params),
    qs.stringify(config.data)
  ].join('&')
  if (pending.has(url)) { // 若是在 pending 中存在當前請求標識，須要取消當前請求，而且移除
    const cancel = pending.get(url)
    cancel(url)
    pending.delete(url)
  }
}
/**
 * 清空 pending 中的請求（在路由跳轉時調用）
 */
export const clearPending = () => {
  for (const [url, cancel] of pending) {
    cancel(url)
  }
  pending.clear()
}

Map是ES6中一種新型的數據結構，自己提供了諸多方法，方便操做，適合當前場景。若是不熟悉的能夠查看ECMAScript 6 入門。

在給config.cancelToken賦值的時候，須要判斷當前請求是否已經在業務代碼中使用了cancelToken

qs是一個專門用來轉換對象和字符串參數的庫，最初是由 TJ 建立並維護的，也是axios推薦使用的參數序列化庫。這裏咱們的目的只是單純的將參數對象轉換爲字符串方便拼接。

Map結構默認部署了Symbol.iterator屬性，可使用for...of循環直接獲取鍵名和鍵值，固然你也可使用for...in循環。

在 axios 攔截器中使用

主要的方法已經寫好了，只須要添加到axios攔截器中就能夠了。

axios.interceptors.request.use(config => {
  removePending(options) // 在請求開始前，對以前的請求作檢查取消操做
  addPending(options) // 將當前請求添加到 pending 中
  // other code before request
  return config
}, error => {
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  removePending(response) // 在請求結束後，移除本次請求
  return response
}, error => {
  if (axios.isCancel(error)) {
    console.log('repeated request: ' + error.message)
  } else {
    // handle error code
  }
  return Promise.reject(error)
})

將clearPending()方法添加到vue路由鉤子函數中

router.beforeEach((to, from, next) => {
  clearPending()
  // ...
  next()
})

測試效果

最後咱們能夠在瀏覽器中測試下，能夠將chrome中控制面板的Network的網絡狀態切換爲Slow 3G來模擬網速慢的狀況。

咱們把查詢按鈕的loading或者disabled屬性幹掉來方便測試

在上面控制面板中能夠看到，紅色的status爲canceled的就是被取消的請求。

上面代碼在e-admin-vue（一個使用 vue + element-ui + vue-cli3 構建的 rbac 權限模型）或者e-admin-react（一個使用 react + antd + create-react-app 構建的 rbac 權限模型）中都有體現，歡迎 star。