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 配合实现请求的取消的。

相关推荐
脑袋大大的17 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0127 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui