vue axios请求频繁时取消上一次请求 (及请求拦截 响应拦截))

在Vue中，可以使用axios的cancelToken来取消上一次请求。具体步骤如下：

1. 在请求拦截器中生成一个cancelToken：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
config.cancelToken = source.token;

2. 在发送请求前取消上一次请求：

if (this.lastRequest) {
  this.lastRequest.cancel('取消重复请求');
}
this.lastRequest = source; // 记录当前请求

3. 在响应拦截器中处理取消请求：

if (axios.isCancel(error)) {
  console.log(error.message);
}

完整代码如下：

const CancelToken = axios.CancelToken;
let lastRequest = null;

// 请求拦截器
axios.interceptors.request.use(config => {
  const source = CancelToken.source();
  config.cancelToken = source.token;

  if (lastRequest) {
    lastRequest.cancel('取消重复请求');
  }
  lastRequest = source; // 记录当前请求

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

// 响应拦截器
axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (axios.isCancel(error)) {
    console.log(error.message);
  } else {
    return Promise.reject(error);
  }
});

这样，在频繁请求的情况下，只会执行最后一次请求，避免了重复请求的问题。