一文深入详解Axios请求取消机制

Axios是否真的支持取消请求呢

是的，Axios 完全支持取消请求。

Axios 提供了两种主要的取消请求的方式：

• 使用 AbortController (推荐，现代浏览器和 Node.js 环境)
• 使用 CancelToken (旧版方式，Axios 0.22.0 之前的主要方式，现在已废弃但仍兼容)

1. 使用AbortController(推荐)

AbortController 是 Web 标准 API，用于中止一个或多个 Web 请求。Axios 从 v0.22.0 开始支持它，并推荐使用这种方式。

示例代码：

import axios from 'axios';

// 1. 创建一个 AbortController 实例
const controller = new AbortController();
const signal = controller.signal; // 获取 AbortSignal 对象

// 2. 在 Axios 请求配置中传入 signal
axios.get('/api/data', { signal })
  .then(response => {
    console.log('请求成功:', response.data);
  })
  .catch(error => {
    // 检查错误是否是由于请求取消引起的
    if (axios.isCancel(error)) {
      console.log('请求被取消:', error.message);
    } else {
      console.log('请求发生错误:', error.message);
    }
  });

// 3. 在需要取消请求时调用 controller.abort()
// 例如，在组件卸载时，或者用户点击了取消按钮时
setTimeout(() => {
  controller.abort(); // 这会触发 signal 上的 abort 事件，Axios 会捕获并取消请求
  console.log('请求已尝试取消');
}, 100); // 100ms 后取消请求

优点：

• 是 Web 标准 API，不仅限于 Axios，也可以用于 fetch API 或其他支持 AbortSignal 的异步操作。
• 更现代、更简洁的 API 设计。
• 可以取消多个请求（将同一个 signal 传递给多个请求）。

2. 使用CancelToken(旧版，已废弃但仍兼容)

CancelToken 是 Axios 早期提供的取消请求机制。虽然现在推荐使用 AbortController，但如果你在使用旧版本的 Axios 或者需要兼容旧代码，它仍然可用。

示例代码：

import axios from 'axios';

// 1. 创建一个 CancelToken.Source 工厂函数
const CancelToken = axios.CancelToken;
const source = CancelToken.source(); // source 对象包含 token 和 cancel 方法

// 2. 在 Axios 请求配置中传入 token
axios.get('/api/data', { cancelToken: source.token })
  .then(response => {
    console.log('请求成功:', response.data);
  })
  .catch(error => {
    // 检查错误是否是由于请求取消引起的
    if (axios.isCancel(error)) {
      console.log('请求被取消:', error.message);
    } else {
      console.log('请求发生错误:', error.message);
    }
  });

// 3. 在需要取消请求时调用 source.cancel()
// 例如，在组件卸载时，或者用户点击了取消按钮时
setTimeout(() => {
  source.cancel('用户取消了请求'); // 传入一个可选的消息
  console.log('请求已尝试取消');
}, 100); // 100ms 后取消请求

优点：

在旧版本 Axios 中广泛使用。

缺点：

• Axios 特有的 API，不适用于其他 Web API。
• 已被 AbortController 替代，未来可能不再维护或推荐。

何时需要取消请求

取消请求在前端开发中非常有用，常见场景包括：

• 组件卸载时：当用户在请求完成前切换页面或组件被销毁时，避免因请求返回后尝试更新已不存在的组件状态而导致的内存泄漏或错误。
• 用户操作取消：例如，用户点击了“取消上传”按钮，或在搜索框中快速输入时，取消之前的旧搜索请求，只保留最新的请求。
• 避免重复请求：在某些情况下，为了防止用户多次点击或快速触发某个操作导致发送多个相同的请求，可以在新请求发出前取消旧请求。

总之，Axios 提供了强大且灵活的请求取消机制，推荐在现代项目中使用 AbortController。

这种取消是前端拒绝接收数据还是真的停止http的请求链接呢？

1. 它是如何“真取消”的？（浏览器层面）

当你调用 controller.abort()（或旧版的 cancelToken）时，Axios 会调用浏览器底层的 API（XMLHttpRequest.abort() 或 fetch 的 signal 机制）。

这意味着：

• 网络连接被切断：浏览器会立即关闭与服务器的 TCP 连接。
• 停止接收数据：如果服务器正在发送一个很大的响应（比如下载一个 100MB 的文件），浏览器会立刻停止下载，节省带宽。
• Promise 立即 Reject：Axios 的 Promise 会立刻抛出一个 CanceledError，你的代码会立刻进入 .catch()，而不需要等待服务器响应超时。

对比：  如果仅仅是“前端不予接收”，浏览器会傻傻地把 100MB 下载完，然后你的代码再把数据扔掉。Axios 的取消是前者，直接掐断连接，节省资源。

2. 服务器端发生了什么？（后端层面）

这是最容易产生误解的地方。 “前端取消了请求”并不代表“后端撤销了操作”。

请求已发出：在大多数情况下，当你点击取消时，请求指令已经通过网络发送到了服务器。

服务器正在处理：服务器收到请求后，开始查询数据库、计算数据或写入记录。

连接中断：此时前端断开了连接。

• 大多数后端框架（如 Java Spring, Node Express, Python Flask） ：通常不会自动检测连接断开而停止业务逻辑。它们会继续把活干完（比如把数据写进数据库），然后试图把结果返回给前端。
• 结果：当服务器试图返回结果时，发现连接已经没了，服务器会报错（如 Broken pipe），但之前的业务逻辑（如写库）可能已经执行了。

举个例子：

你在餐厅点了一道菜（发送请求）。

厨师开始做菜（服务器处理）。

你突然有急事走了，跟服务员说“我不要了”（前端取消请求）。

• 前端视角：你走了，没吃到菜，也没付钱（节省了时间和资源）。
• 后端视角：厨师可能已经把菜做好了，发现没人吃，只能倒掉。但菜确实被做出来了（副作用已产生）。

3. 总结：三种情况

根据取消的时机不同，效果也不同：

请求还在排队（极少见） ：

• 浏览器还没来得及把请求发出去你就取消了。
• 结果：服务器完全不知道有这回事，这是最彻底的取消。

请求在传输中/服务器处理中（最常见） ：

• 请求已发，服务器正在算，前端取消。
• 结果：前端断开连接，不再等待。服务器可能还是会把活干完，但发不回来。这对前端来说是真取消（不卡界面、不费流量），对后端来说通常无法撤销副作用。

响应已到达浏览器：

• 服务器数据已经发回来了，浏览器刚收到，你正好点了取消。
• 结果：这时候其实已经晚了，Axios 只是抛个错让你忽略结果。这就变成了你说的“前端不予接收”。

核心建议

用于优化体验：Axios 的取消非常适合用于搜索框联想（输入 a 发请求，紧接着输入 ab，此时取消 a 的请求）或切换 Tab。这能有效防止“旧数据的响应覆盖了新数据”的 Bug，并节省带宽。

不要依赖它来回滚数据：如果你发的是 POST 请求（比如“付款”），千万不要指望前端取消就能阻止服务器扣款。后端必须要有幂等性设计或专门的撤销接口。

到此这篇关于一文深入详解Axios请求取消机制的文章就介绍到这了,更多相关Axios请求取消机制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论