axios 是如何实现取消请求的?

axios 是现在前端项目中最常使用的一个请求库,目前 Github star 已经达到了 104k star。

最近一段时间在看 axios 仓库源码,于是起了一个写"axios 源码系列"的念头,本文是这个系列的第一篇

源码系列的安排

我对这个源码系列的安排,不是循规蹈矩的从头说起,而是在阅读源码的过程当中,突然想写哪块内容我就写哪块。

不过,在座或在站的读者不用担心阅读的连贯性。这个系列的每篇文章内容相对独立,这样方便大家按需阅读。另外,每篇文章也会写得比较简短,保证大家在 5 分钟内看完,同时又能有所收获。

好了,书归正传。

本文我们讨论的问题是------axios 是如何实现取消请求(Cancel requests)的?

在 axios 中取消请求

axios 是这样取消请求的。

js 复制代码
const controller = new AbortController();

axios.get('https://httpstat.us/200', {
  signal: controller.signal
}).catch(error => {
  // 2) 在 catch 中捕获错误
  console.log(error) // { message: 'canceled', name: 'CanceledError', code: 'ERR_CANCELED' }
});
// 1) 取消请求
controller.abort()

AbortController 是在 DOM 标准中定义的 API,统一了取消类操作的实现,在浏览器端已经受到广泛支持了。

取消请求的实现

取消请求的实现位于 lib/adapters/xhr.js(暂不考虑 Node.js 实现)。

js 复制代码
// /v1.6.8/lib/adapters/xhr.js#L244
if (config.signal) {
  config.signal.aborted
    ? onCanceled() :
    config.signal.addEventListener('abort', onCanceled)
}

内部会判断是否传入了 signal 配置项。如果传入了,就监听 controller.signal 上的 abort 事件,这个事件会在调用 controller.abort() 方法时触发。

不过,还有一种可能是传入 controller.signal 时,先前就已经调用了 controller.abort(),这样 abort 事件永远都不会触发了。

不过没有关系,调用了 controller.abort() 后,controller.signal.aborted 属性会置为 true,因此可以通过 aborted 属性,确保 onCanceled 回调函数始终被调用。

onCanceled 处理函数内容如下。

js 复制代码
// /v1.6.8/lib/adapters/xhr.js#L234
onCanceled = cancel => {
  reject(!cancel || cancel.type
    ? new CanceledError(null, config, request) 
    : cancel
  );
  request.abort();
};

调用 controller.abort() 后,处理函数 onCanceled 会接受一个 cancel Event 参数,结构类似 { type: 'abort' } 这样,然后就会返回 axios 自定义的 CanceledError 错误。

这里有 2 个知识点:

  1. axios 对接口请求过程使用 new Promise((resolve,reject)){...} 进行了封装,确保始终返回 Promise 对象,这里的 reject(...) 表示"请求以失败告终"
  2. 至于 reject(cancel) 的分支逻辑,是为了兼容 CancelToken 的写法,这是旧的取消请求的实现,不过现在已经弃用了,新项目中不要再用了

最后,调用 request.abort(),这是实际终止当前请求的地方。

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

js 复制代码
// /v1.6.8/lib/adapters/xhr.js#L76
let request = new XMLHttpRequest();

到此,我们就完成了 axios 取消请求的实现介绍。你是否看懂了呢?

总结

取消请求是 axios 提供的核心功能之一,本文我们介绍了它在浏览器端的实现。

axios 在浏览器端是使用 XMLHttpRequest API 提供请求能力的,其实例上提供了 abort() 方法用于终止请求,而 axios 就是利用这一点跟 AbortController API 配合实现请求的取消的。

相关推荐
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端11 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧11 小时前
Promise 的使用
前端·javascript