axios取消请求CancelToken的用法示例代码

import axios from 'axios';
 // 创建一个 CancelToken 对象
const source = axios.CancelToken.source();
 // 发送请求
axios.get('/api/data', {
  // 将 cancelToken 属性设置为上面创建的 CancelToken 实例
  cancelToken: source.token
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});
 // 取消之前的请求
source.cancel('Duplicate request');

import axios from 'axios';
 // 创建一个请求队列
let pending = [];
const CancelToken = axios.CancelToken;
const removePending = (config) => {
  for (let p in pending) {
    if (pending[p].url === config.url + '&' + config.method) {
      pending[p].cancel("request canceled");
      pending.splice(p, 1);
    }
  }
}
 // 添加请求拦截器
axios.interceptors.request.use(
  (config) => {
    removePending(config);
    config.cancelToken = new CancelToken((c) => {
      pending.push({ cancel: c, url: config.url + '&' + config.method });
    });
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
 // 响应拦截器
axios.interceptors.response.use(
  (response) => {
    removePending(response.config);
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

import axios from 'axios';
let cancelToken = axios.CancelToken;
let cancel;
let config = {
  method: 'get',
  url: '/api/data',
  cancelToken: new cancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
};
// 添加请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 如果 cancel 存在说明上次请求被取消了，重新创建一个
    if (typeof cancel === 'function') {
      config.cancelToken = new cancelToken(function executor(c) {
        cancel = c;
      });
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
// 发送请求
axios(config)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.log(error);
    }
  });
// 取消请求
cancel();