axios取消请求源码解读

本文基于axios的1.0.0-alpha.1版本来分析。在v0.22.0之前的版本中，取消请求使用的是CancelToken的方式，此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用。（但经过测试，在1.0.0-alpha.1这个版本中依旧可以使用）。 从v0.22.0版本开始，Axios 支持以 fetch API 方式—— AbortController 取消请求。下面就分别来看看这两种方式吧。

CancelToken方式

使用方式

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 取消多个请求。

源码解读

首先看一下CancelToken的实现，CancelToken本质上一个发布订阅模式的实现

订阅操作，此操作实际上就是取消请求的操作

在这里依次执行订阅的函数

并将请求函数通过executor传到外部

找到http这个adapter,这是浏览器端发送实际请求的实现，可以发现，在创建请求的时候，canceltoken已经订阅了真正的取消函数

AbortController方式

使用方式

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

// 取消请求 
controller.abort()

AbortController是原生语法，我们先看看MDN中关于AbortController的定义。 AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。它可以用于fetch请求中，而且，它天然支持事件机制，可用于监听取消事件

源码解读

总结

CancelToken中通过发布订阅模式，在创建请求时，就订阅了这个请求的取消函数；而AbortController是使用原生的控制器对象，自带事件监听机制，可用于监听取消事件的发生。