axios 取消重复请求

为了避免重复请求，我们可以使用 Axios 提供的 CancelToken 来取消请求。具体操作如下：

1. 在发送请求前，创建一个 CancelToken 对象：

const source = axios.CancelToken.source();

2. 将该对象的 token 属性作为请求的 config 对象中的 cancelToken 属性的值：

axios.get('/api/user', {
  cancelToken: source.token
}).then(response => {
  console.log(response.data);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    console.log(error);
  }
});

3. 如果需要取消请求，在需要取消的地方调用 source.cancel() 方法即可：

source.cancel('请求被取消了');

这样，在发送多次相同请求的时候，只有最后一次请求会被发送，之前的请求会被取消。

相关问题

axios取消重复请求

在使用axios发送请求时，我们可以使用axios的CancelToken来取消重复请求。

首先，我们需要创建一个axios实例，然后在拦截器中检查是否有相同的请求正在进行中，如果有，则取消重复请求。

以下是一个示例代码：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://example.com/api',
});

let pending = []; // 存储所有正在进行的请求

const cancelToken = axios.CancelToken;
const removePending = (config) => {
  for (let i = 0; i < pending.length; i++) {
    if (pending[i].url === config.url + '&' + config.method) {
      // 取消重复请求
      pending[i].cancel();
      pending.splice(i, 1);
    }
  }
};

instance.interceptors.request.use(
  (config) => {
    removePending(config);
    config.cancelToken = new cancelToken((c) => {
      pending.push({ url: config.url + '&' + config.method, cancel: c });
    });
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response) => {
    removePending(response.config);
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

在上面的代码中，我们创建了一个名为“pending”的数组来存储所有正在进行的请求。在请求拦截器中，我们使用axios的CancelToken来创建一个取消令牌，并将其添加到请求配置中。同时，我们还将请求的URL和HTTP方法作为键值对存储在“pending”数组中，以便我们可以在拦截器中检查是否存在相同的请求正在进行中。如果有相同的请求正在进行中，则取消新请求。在响应拦截器中，我们从“pending”数组中删除已完成的请求。

这样，我们就可以避免发送重复请求了。

axios取消重复的旧请求

在使用axios发送请求时，可以使用axios的cancelToken来取消旧请求。当发起新请求时，先取消旧请求，然后再发送新请求。

具体实现可以参考以下步骤：

1. 创建一个axios的cancelToken对象：

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

2. 在发送请求前，先取消旧请求：

if (this.lastRequest) {
  this.lastRequest.cancel();  // 取消旧请求
}
this.lastRequest = source;    // 保存新请求

axios.get(url, {
  cancelToken: source.token
}).then(response => {
  console.log(response.data);
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    console.log(error);
  }
});

在取消请求时，需要判断当前请求是否已经被取消，如果已经被取消，就不再处理。

3. 在组件销毁时，取消最后一次请求：

beforeDestroy() {
  if (this.lastRequest) {
    this.lastRequest.cancel();  // 取消最后一次请求
  }
}

这样就可以实现取消重复的旧请求了。