SPA 中，由于页面没有刷新，导致路由跳转后，之前的请求没有被取消掉，请求完成或者失败后仍然可能执行 success 或者 error 中的部分代码

那么，想要在切换路由后取消请求，该怎么做呢？

首先，需要知道怎么去取消一个请求，下面以axios为例

取消请求

AbortController​

从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求：

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

CancelToken ​

您还可以使用 cancel token 取消一个请求。

Axios 的 cancel token API 是基于被撤销 cancelable promises proposal。

此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用。

可以使用 CancelToken.source 工厂方法创建一个 cancel token ，如下所示：

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

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

也可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

注意: 可以使用同一个 cancel token 或 signal 取消多个请求。

在过渡期间，您可以使用这两种取消 API，即使是针对同一个请求：

const controller = new AbortController();

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

axios.get('/user/12345', {
  cancelToken: source.token,
  signal: controller.signal
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求 (message 参数是可选的)
source.cancel('Operation canceled by the user.');
// 或
controller.abort(); // 不支持 message 参数

路由切换取消请求

下面的代码是demo，参考注释很容易懂

service.interceptors.request.use(
    (config) => {
        if (!config.disabledCancel) { // 当前请求是否开启中断请求能力
            config.cancelToken = new CancelToken((c) => { // 配置cancelToken，这个c就是cancel()
                if (config.disallowDuplicate) { // 是否开启不允许重复请求，如果重复，取消上一个请求，插入最新的请求放回pendingRequest
                    const key = generateKey(config.url, config.method);
                    const cancel = pendingRequest.get(key);
                    if (cancel) {
                        pendingRequest.delete(key);
                        cancel({ // 取消请求
                            key,
                            reason: 'disallowDuplicate',
                        });
                    }
                    pendingRequest.set(key, c);
                }
            });
        }
    }
}
// const pendingRequest = new Map();

然后需要再暴露一个方法，用于取消所有pendingRequest中的请求。

最后在路由模块前置守卫中调用暴露的方法，这样就可以实现切换路由取消请求了。over