一：概述

axios 是现在前端项目中最常使用的一个请求库，那么，在实际开发过程中，我们会遇到切换路由时要取消请求情况，或者说长时间后端不响应情况，也需要取消，那么，怎么实现呢？

二：方式

1：AbortController实现取消请求，（旧浏览器不支持，有兼容性）

const controller = new AbortController(); 
axios.get('/foo/bar', 
    { signal: controller.signal }
).then(
    function(response) { //... }
); 
// cancel the request 
controller.abort()

2：CancelToken(从v0.22.0被废弃)

//第一种方式
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{
      // error
    }
}))

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

// 取消请求
source.cancel('Operation canceled by the user.');

//第二种方式
const CancelToken = axios.CancelToken;
let cancel;
axios.get("/user/12345", {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  }),
});
cancel();

三：原理

1：源码

if (_config.cancelToken || _config.signal) {
      // Handle cancellation
      // eslint-disable-next-line func-names
      onCanceled = cancel => {
        if (!request) {
          return;
        }
        reject(!cancel || cancel.type ? new CanceledError(null, config, request) : cancel);
        request.abort();
        request = null;
      };

      _config.cancelToken && _config.cancelToken.subscribe(onCanceled);
      if (_config.signal) {
        _config.signal.aborted ? onCanceled() : _config.signal.addEventListener('abort', onCanceled);
      }
}

2：实现

axios判断cancelToken存在，则会订阅onCanceled方法，当onCanceled触发后，将会取消请求，这里的取消请求，不会影响向服务器发起的请求，只会在浏览器侧终止。

axios会判断signal是否存在，如果存在则会判断aborted是否为true，如果是true，则终止请求

四：总结

1：调用 request.abort()，这是实际终止当前请求的地方

2：request 就是 XMLHttpRequest 实例，abort() 是 XMLHttpRequest 天然支持的用于终止请求的方法