axios 标記請求 取消重複請求

前言

當按鈕點選過快時，會重複發送多個請求，當請求被再次被發送時，前一個請求并沒有傳回請求結果，那麼就取消前一個請求，不再進行響應。

1.辨別請求方法

// 辨別請求
const getRequestIdentify = (config, isReuest = false) => {
  let url = config.url;
  if (isReuest) {
    url = config.baseURL + config.url.substring(1, config.url.length);
  }
  return config.method === 'get'
    ? encodeURIComponent(url + JSON.stringify(config.params))
    : encodeURIComponent(config.url + JSON.stringify(config.data));
};
           

2.取消重複請求

// 取消重複請求
const pending = {};
const CancelToken = axios.CancelToken;
const removePending = (key, isRequest = false) => {
  if (pending[key] && isRequest) {
    pending[key]('取消重複請求');
  }
  delete pending[key];
};
           

3.在請求攔截器處使用

// 請求攔截器
axios.interceptors.request.use(
  config => {
    // 攔截重複請求(即目前正在進行的相同請求)
    // 辨別請求
    const requestData = getRequestIdentify(config, true);
    // 取消重複請求
    removePending(requestData, true);
    // 建立目前請求的取消方法
    config.cancelToken = new CancelToken((c) => {
      pending[requestData] = c;
    });

    return Promise.resolve(config);
  },
  error => {
    return Promise.reject(error);
  }
);
           

4.效果圖

如果本篇文章對你有幫助的話，很高興能夠幫助上你。

當然，如果你覺得文章有什麼讓你覺得不合理、或者有更簡單的實作方法又或者有了解不來的地方，希望你在看到之後能夠在評論裡指出來，我會在看到之後盡快的回複你。