axios取消频繁请求

在使用 Axios 进行 HTTP 请求时，取消频繁请求是一个重要的优化手段，尤其是在处理如搜索、实时更新等场景时。以下是一些使用 Axios 取消频繁请求的策略：

1. 使用 Axios 请求实例： Axios 请求返回一个请求实例，该实例具有 abort 方法，可以用来取消请求。你可以在组件的数据中存储这个实例，并在需要时调用 abort 方法来取消请求。

import axios from 'axios';

export default {
  data() {
    return {
      axiosInstance: null,
    };
  },
  methods: {
    sendRequest() {
      if (this.axiosInstance) {
        this.axiosInstance.abort();
      }
      this.axiosInstance = axios.get('/api/data');
      this.axiosInstance.catch(err => {
        if (axios.isCancel(err)) {
          console.log('Request canceled', err.message);
        } else {
          console.error('Error', err);
        }
      });
    }
  }
};

2.使用 Axios 请求拦截器：

你可以在 Axios 中设置请求拦截器，在拦截器中检查是否有重复的请求，并取消之前的请求。 

const pendingRequests = {};

axios.interceptors.request.use(config => {
  const requestKey = config.url + config.method;

  if (pendingRequests[requestKey]) {
    pendingRequests[requestKey].abort();
    delete pendingRequests[requestKey];
  }

  pendingRequests[requestKey] = config.cancelToken.source;
  return config;
});

axios.interceptors.response.use(response => {
  const requestKey = response.config.url + response.config.method;
  delete pendingRequests[requestKey];
  return response;
}, error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
    return Promise.reject(error);
  }
  return Promise.reject(error);
});

3.使用防抖（Debounce）：

对于频繁触发的事件（如输入事件），可以使用防抖库（如 Lodash 的 debounce 函数）来限制请求的发送频率。 

import _debounce from 'lodash/debounce';

const debouncedFunction = _debounce((value) => {
  this.sendRequest(value);
}, 500);

searchInput.addEventListener('input', (event) => {
  debouncedFunction(event.target.value);
});

4.使用 Axios 取消令牌（CancelToken）：

Axios 允许你通过 CancelToken 来取消请求。你可以创建一个 CancelToken 实例，并将其传递给请求配置中的 cancelToken 属性。 

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
});

// 当需要取消请求时
source.cancel('Operation canceled by the user.');

通过这些方法，你可以有效地控制和取消 Axios 发出的频繁请求，从而提高应用程序的性能和用户体验。