场景

在项目中切换路由，停止原路由中的正在请求的接口

例子：两个路由链接 A 和 B 分别可以通过Axios获取不同的文章，当点击 A 发起请求时，在服务器响应之前再马上点击 B，就会出现选中的 B 却加载了 A 的文章的情况出现

代码实现

通过Axion的CancelToken来实现取消请求

import axios from "axios";

const instance = axios.create({
    baseURL: C.API.BASE_URL
});


let sourceRequest = {};

instance.interceptors.request.use(
  request => {
    // 在这里判断如果有重复url的请求，则先取消旧请求
    if (sourceRequest[request.url]) {
      sourceRequest[request.url].cancel();
    }
    let tokenSource = axios.CancelToken.source();
    sourceRequest[request.url] = { cancel: tokenSource.cancel };
    request.cancelToken = tokenSource.token;
    return request;
  },
  error => Promise.reject(error)
)


instance.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 因为cancel()会返回一个错误的promise，所以这里需要判断一下
    if (axios.isCancel(error)) {
      console.log('cancel...')
    } else {
      message.error('系统繁忙，请稍后再尝试')
      return Promise.reject(error)
    }
  }
)