Axios 源码中取消请求的机制是如何巧妙设计的？

那么到这里,我们完整跟着请求代码把axios施行过程给讲了一遍,你会发现axios在内部其实就是创建一个名为token 的 Promise与一个改变Promise状态的方法cancel,当你需要取消一个请求时,那就把这个Promise与请求绑在一起,然后便可发现若请求发出,是会取消请求,所以可以看到chrome控制台有红色的被取消的请求,而axios直接没请求,猜测应该是axios内部做了特殊处理,或者是我请求被取消的太快,导致根本没发出,至于这点... 真的让人头大， 有时候你不得不感叹，前端的坑真是一个接一个，但是当你搞懂了之后那种爽快感简直无法言喻！

切记... 在前端开发的日常工作中，HTTP 请求是与后端进行数据交互的重要手段。只是,在一些复杂的业务场景下,比如用户频繁操作页面,可能会触发多个不必要的请求;或者在页面跳转时,之前发起的请求如果还未完成,就需要及时取消,以避免资源浪费和不必要的错误。Axios 作为一款广泛使用的 HTTP 客户端库,提供了强大的请求取消功能,这一功能主要集中在 axios-/lib/cancel 目录下。这不仅仅是一个功能，更是一种艺术，一种对异步流程控制的极致追求！

一、 CancelToken 的核心设计哲学

CancelToken 的设计目的是提供一种机制，让开发者可以在请求发送前或发送过程中取消请求。通过 Promise 来管理取消状态，使得取消操作可以与请求的生命周期进行交互。source 静态方法简化了 CancelToken 实例和 cancel 函数的创建过程，提高了开发效率。这听起来是不是很玄乎？其实说白了就是给你一个开关，让你能随时掐断请求的喉咙，哈哈！

文章介绍了如何利用Axios库中的CancelToken机制来取消正在进行的HTTP请求。通过创建CancelToken实例,可以取消一个或多个请求,并在catch块中处理取消操作。还有啊,还提到了使用executor函数创建canceltoken的方法。 写在再说说Axios 的 cancel token API 基于,它还处... 这种设计模式真的是太妙了 它利用了 JavaScript Promise 的不可逆特性，一旦 resolve，就无法回头，就像逝去的青春，一去不复返啊！

我们来看看这段核心代码， 真的是字字珠玑：，优化一下。

'use strict';
var Cancel = require;
function CancelToken {
  if  {
    throw new TypeError;
  }
  var resolvePromise;
  this.promise = new Promise {
    resolvePromise = resolve;
  });
  var token = this;
  executor {
    if  {
      // 已经取消，忽略
      return;
    }
    token.reason = new Cancel;
    resolvePromise;
  });
}
CancelToken.source = function source {
  var cancel;
  var token = new CancelToken {
    cancel = c;
  });
  return {
    token: token,
    cancel: cancel
  };
};
CancelToken.prototype.throwIfRequested = function throwIfRequested {
  if  {
    throw this.reason;
  }
};
module.exports = CancelToken;

看到了吗？那个 executor 函数， 它就像是一个桥梁，连接了外部的取消操作和内部的 Promise 状态。当你调用 source.cancel 的时候， 其实吧就是触发了这个 cancel 函数，然后 resolvePromise 被施行，Promise 变成了 resolved 状态。这简直是神来之笔！我不禁要问，作者是怎么想出来的？难道脑子里装的不是脑浆，全是代码吗，不夸张地说...？

二、 错误处理与 CanceledError

我好了。 在处理请求取消的错误时开发者可能需要判断错误是否是由于请求取消引起的。isCancel 函数提供了一种简单而高效的方式来进行判断，提高了代码的健壮性和可维护性。这一点在大型项目中尤为重要，主要原因是你不想主要原因是用户手滑点了取消，整个程序就崩了对吧？那可就太尴尬了简直是灾难现场！

需要有一个特定的错误类型来标识这种情况，以便开发者在代码中进行针对性的错误处理。通过创建 CanceledError 类， 将请求取消相关的错误信息进行统一封装，并且保留了原始的请求配置和请求对象， 无语了... 有助于开发者更好地定位和解决问题。这种封装思想， 体现了面向对象编程的精髓，虽然有时候我们写代码写得像面条一样乱，但看到这种优雅的代码，心里还是会有一丝慰藉的。

也许吧... 这段代码定义了一个 CanceledError 类，用于表示请求被取消时抛出的错误。在构造函数中， 先说说调用 来继承 Error 类的基本属性，然后设置了自定义的属性 messagenameconfig 和 request分别用于存储错误信息、错误名称、请求配置和请求对象。 方法用于捕获错误堆栈信息，方便调试。再说说通过 方法让 CanceledError 类正式继承 Error 类。

'use strict';
var utils = require;
function CanceledError {
  ; 
  this.message = message;
  this.name = 'CanceledError';
  this.config = config;
  this.request = request;
  if  {
    Error.captureStackTrace;
  }
}
// 继承 Error 类
utils.inherits;
module.exports = CanceledError;

看到这里你是不是觉得有点晕？没关系，我也晕。但是这就是源码的魅力啊！它强迫你去思考， 吃瓜。 去理解每一个细节。虽然过程很痛苦，就像拔牙一样，但是拔完之后就不疼了还能吃香喝辣！

三、 判断取消与工具函数

这段代码定义了一个名为 isCancel 的函数，用于判断一个值是否是由 Cancel 类创建的取消对象。通过双重取反操作， 行吧... 将后来啊转换为布尔值返回。这短短几行代码，却蕴含着巨大的能量，就像浓缩铀一样，体积小，威力大！

'use strict';
export default function isCancel { 
  return !!;
}

这个 __CANCEL__ 属性， 就像是一个暗号，只有自己人知道。当你看到这个暗号，你就知道，哦，原来这个请求是被取消的，而不是主要原因是网络炸了或者服务器挂了。这种设计，真的是太贴心了简直比女朋友还贴心，我直接起飞。。

四、 实际应用场景与对比

只是,在实际应用中,我们可以通过一些机制来间接实现取消HTTP请求的效果。比方说,在前端开发中,我们可以使用JavaScript来监听用户的行为,然后在合适的时候停止处理HTTP请求的响应。这并不意味着请求本身被取消了,而是客户端不再关心这个请求的后来啊,也不会对其进行... 现在,当用户想要取消请求时,他们会调用source.cancel函数,这会触发CancelToken中的executor函数,进而解析this.promise为一个Cancel实例。在 Axios 内部,当发送请求时,会检查这个promise,并在请求被取消时拒绝相关的Promise，栓Q了...。

为了让大家更直观地理解， 我特意整理了一个表格，对比一下市面上几种常见的 HTTP 请求库在取消请求方面的表现。看看，这就是差距，这就是为什么我们要学源码的原因，拉倒吧...！

看到了吧，Axios 在这方面做得是相当不错的。虽然 Fetch API 现在也很火， 但是 Axios 的这种设计，真的是把 Promise 玩到了极致。而且，它还兼容了旧版本的浏览器，这种兼容精神，值得我们每一个前端开发者学习！

踩个点。 2.通过传递一个 executor到 CancelToken 的构造函数创建cancel token 函数axios有一个CancelToken属性,他是一个类,用于获取取消请求的cancel方法,获取了该方法之后就可以在合适的地方施行cancel取消请求了。这种方式比较麻烦,但是可以用于取消多个请求,你可以将c这个取消请求的方法push进一个数组,然后在你需要取消多个请求的时候,循环这个数组,依次施行里面的方法即可取消多个请求。 注意点1: cancel取消请求方法在调用取消请求的时候可以将取消原因——message字符串传递进去,这样请求在被取消之后会被catch捕获,你可以在这里将取消原因打印出来或者提示给用...

这里我一边发送了3次重复的history请求,过滤取消了2次,成功发送了1次。 3、利用路由导航守卫取消请求 当路由切换的时候,在路由钩子里遍历这个数组,调用所有的cancel方法,将上一个页面还未完的请求取消,这样就可以加快页面... 这种场景在单页应用中简直是太常见了。 这是可以说的吗？ 用户点得飞快， 你的请求要是还在后面慢吞吞地跑，那不仅浪费带宽，还可能导致数据错乱，比如用户明明已经跳到了详情页，后来啊列表页的数据才回来把详情页的数据给覆盖了那用户不得骂娘？

五、 深入源码的感悟

奥利给！ 本文了 Axios 版本中 axios-/lib/cancel 目录下的三个核心文件。 定义了请求取消时抛出的错误类型， 为错误处理提供了统一的标准； 作为取消请求体系的核心，通过 Promise 管理取消状态，提供了灵活的取消请求机制； 则提供了一个简单的工具函数，用于判断错误是否由请求取消引起。

接下来 我们将该目录下的 和 这三个文件，揭开 Axios 取消请求体系的神秘面纱。这就像是在探险，你永远不知道下一行代码会给你带来什么样的惊喜。 实锤。 有时候你会发现， 原来大佬写的代码也会有注释写错的地方，或者变量名起得很随意，这时候你会觉得，哎哟，原来大佬也是人啊，瞬间就拉近了距离！

MCP广场社区首页专栏Axios 源码笔记 | Cancel 请求取消体系解构,从设计哲学到生产实践的全链路剖析Axios 源码笔记 | Cancel 请求取消体系解构,从设计哲学到生产实践的全链路剖析 叶一一 关注发布于2025-04-22 09:37:07 发布于2025-04-22 09:37:07 15700 举报 一、 在现代前端工程实际操作中,网络请求管理已从简单的收发数据演变为复杂的流程控制，精辟。。

当用户快速切换页面、重复提交表单或施行高频率操作时,未完成的冗余请求可能引发以下问题: Axios 通过 CancelToken 为核心的取消体系,构建了类似电路保险丝的防御机制。

通过阅读源码， 我们不仅了解了 Axios 取消请求体系的实现原理，还学习到了一些优秀的编程思想和设计模式。比方说 使用继承来 错误类型，利用 Promise 管理异步操作的状态，以及封装工具函数提高代码的复用性。这些知识可以帮助我们在实际开发中更好地处理请求取消的场景， 就这？ 优化用户体验。这些知识就像是一把把钥匙，能帮你打开通往高级前端工程师的大门。当然 光看不练假把式，看完之后一定要自己动手写一写，不然过两天就忘得一干二净了别问我怎么知道的，都是血泪史啊！

文章浏览阅读5.7k次,点赞50次,收藏35次。Axios 是一个基于 Promise 的 HTTP 客户端,用于在浏览器和 Node.js 中发起 HTTP 请求。除了强大的功能和丰富的配置选项,Axios 还提供了一个实用的特性——CancelToken,它允许我们取消一个或多个正在进行的请求。在网络应用中,我们经常需要处... 这个机制使得在实际应用中管理和取消重复的请求变得容易，那必须的！。

这里我一边发送了3次重复的history请求,过滤取消了2次,成功发送了1次。

为了让大家更清楚在不同场景下如何选择取消策略， 我悟了。 我又做了一个表格，别嫌我烦，这都是干货！

{cancelToken: source.token}).catch= {if ) {console.log;} else {// 处理错误}});// post请求示例axios.post;// 取消请求source.cancel;if (response.status ==...，绝了...

我持保留意见... 今天就给大家说一下,比较难懂的代码:cancelToken,他是怎么利用Promise跑起来的以及一些设计思路,不管你会不会这个库,都可以尝试理解一下源码的设计思路。 取消请求 先说一下,有时我们上传一个文件到服务器的时候,文件很大,不可能一下传完,但是我们中途发现文件错了,所以呢我们点击取... 调整一下。 所以呢,我们要想办法让source某一部分能访问到该对象。这里唯一的触及点就是传递的cancelToken:source.token。 太魔幻了。 文章浏览阅读1.5k次。首发于我的公众号「前端面壁者」,欢迎关注。基于 TC39 的 cancelable promises proposal 提议封装,但是这个提议已经被发起人自己取消了,据说是主要原因是 Google 内部反对意见很大,详情可以到相关 issueWhy was this proposal withdrawn?看一下。一、 环境准备axios 版本 v0.24.0通过 github1s 网页可以 查看 axios 源码调试需要 clone 到本地git clone https://gi._axios cancel - 取消请求cancel模块研读解析 https://blog.csdn.net/weixin_42373581/article/details/122941430版权javascript一边被 2 个专栏收录17 篇文章2 订阅 10 篇文章0 订阅 首发于我的公... Axios 的取消请求机制，不仅仅是一段代码，更是一种智慧的结晶。它告诉我们，即使是看似简单的取消操作，背后也有如此复杂的逻辑和。我们在写代码的时候， 也要多思考，多争取有一天也能写出这么牛的代码，让别人也来分析我们的源码，那该多带劲啊！好了废话不多说了大家赶紧去试试吧，别光看不练，到时候出了 Bug 可别怪我没提醒你！加油吧，打工人！