无需登录 数据私有 本地保存

AbortController 演示 - 取消 Fetch 请求

API演示 JavaScript AbortController Fetch 取消 请求
20
0
0
0

AbortController 演示

交互式学习 AbortController 如何取消正在进行的 Fetch 请求。 涵盖基础用法、并发管理、竞速模式与超时控制四大场景。

总请求次数
0
成功完成
0
已取消
0
活跃请求
0
请求控制面板
1秒10秒
状态： 空闲
等待发起... 0%
AbortController.signal.aborted: false
对应代码
// 1. 创建 AbortController 实例
const controller = new AbortController();

// 2. 将 signal 传递给 fetch
fetch('/api/data', {
    signal: controller.signal
}).then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
      if (err.name === 'AbortError') {
          console.log('请求已取消');
      }
  });

// 3. 调用 abort() 取消请求
controller.abort();
操作日志
[就绪] 等待发起请求...
并发请求任务
暂无任务，点击"添加任务"开始
知识点

同一个 AbortController 的 signal 可以同时传递给多个 fetch 请求， 调用一次 abort() 即可取消所有关联请求。上面每个任务使用独立的 Controller，实现独立取消。

请求竞速

同时发起多个延迟不同的请求，第一个完成后自动取消其余请求——这是 AbortController 的经典应用场景。

请求 A
延迟 2 秒
等待
请求 B
延迟 4 秒
等待
请求 C
延迟 6 秒
等待
超时自动取消

使用 setTimeout + AbortController 实现请求超时自动取消。

5 秒
3 秒
超时时间 < 请求延迟时，请求将被自动取消
等待发起...
AbortController API 速查
// 创建实例
const ac = new AbortController();

// 获取 signal
const signal = ac.signal;

// 检查是否已中止
console.log(signal.aborted); // false

// 监听 abort 事件
signal.addEventListener('abort', () => {
    console.log('被取消了！');
});

// 取消操作
ac.abort('可选原因'); // 可传递 reason

// abort() 后 signal.aborted === true
// 一个 AbortController 只能使用一次
常见问题 (FAQ)
AbortController 是什么？
AbortController 是一个浏览器内置的 API，用于随时取消异步操作（如 Fetch 请求）。 它通过 signal 属性与目标操作关联，调用 abort() 方法即可触发取消。 它是处理请求取消、避免资源浪费的标准方式。
如何判断请求是被取消还是其他错误？
在 catch 中检查 error.name === 'AbortError'。AbortError 是 DOMException 的一种， 专门用于标识因 AbortController 取消而终止的操作。建议始终区分 AbortError 和其他网络错误。
一个 AbortController 可以复用吗？
不可以。一旦调用 abort()，其 signal.aborted 变为 true 且无法重置。 如果需要发起新请求，必须创建新的 AbortController 实例。但同一个 signal 可以同时传给多个请求。
AbortController 能取消哪些操作？
除了 Fetch API，AbortController 还可以取消：addEventListener 的信号绑定、 ReadableStream、WritableStream、以及任何支持 signal 选项的异步操作。 它正成为 Web 平台上通用的取消机制。
如何在 React/Vue 中使用 AbortController？
在组件挂载时创建 AbortController，在组件卸载（useEffect 清理函数 / onUnmounted）时调用 abort()， 可以防止组件卸载后仍然更新状态导致的内存泄漏。这是 React 官方推荐的最佳实践。
AbortController 的浏览器兼容性如何？
AbortController 在现代浏览器中获得广泛支持：Chrome 66+、Firefox 57+、Safari 12.1+、Edge 16+。 对于不支持的环境，可以使用 polyfill 或 Promise.race 配合超时来模拟部分行为。

所有"模拟请求"均使用真实 AbortController + Promise 实现，无需网络即可演示。 切换至"真实请求"模式将使用实际 Fetch API 到目标 URL。

🔧 相关工具