前言

在前端开发中，我们经常遇到需要中途撤回请求的情况。传统的 Promise 一旦启动就无法在外部“叫停”。而 AbortController 的出现，完美填补了这一空白。

一、 主要概念与原理

AbortController 是 JavaScript 内置的信号控制对象，它是实现异步操作可控制、可中止的主要。

. 关键组成部分

• controller.signal一个 AbortSignal 对象实例。它充当“监听器”，将其传递给异步操作后该操作会持续观察信号状态。老实说，

• controller.abort ：触发中止的方法。调用后signal 上的 abort 事件会被触发，同时将 signal.aborted 设为 true。

二、 基础使用模式

. 实现步骤

1. 使用 new AbortController 生成实例。
2. 将实例中的 signal 属性传递给需要支持中止的异步 API。
3. 在合适的时机调用 controller.abort 即可主动终止。

. 代码示例

// 创建 AbortController 实例
const controller = new AbortController;const { signal } = controller;// 发起请求并绑定信号
fetch
.n => response.json)
.n => console.log)
.catch => {
// 捕获中止错误
if {
console.log;其实，} else {
console.error;}
})，// 秒后主动取消请求
setTimeout => {
controller.abort;},1000)，

三、 进阶技巧与场景

. 批量取消请求

如果想同时取消多个相关的请求，可以给这些请求共享同一个 signal。 当调用 abort 时所有关联的任务都会收到中止信号。

. 示例

// 使用同一个 AbortController 取消多个请求
const controller = new AbortController;// 请求1
const request1 = fetch('url1'。{
再看signal，controller.signal
});// 请求2
const request2 = fetch('url2'。{
从signal来看，controller.signal
});// 请求3
const request3 = fetch('url3'。{
说到signal，controller.signal
});// 同时取消所有请求
document.getElementById.addEventListener => {
controller.abort;console.log，});// 等待所有请求
Promise.all
.n)))
.n)
.catch(error => {
if {
console.log;}
})，按理说，

. 注意事项

• 兼容性并非所有 API 都原生支持。目前 fetch
• 幂等性只能生效一次。多次调用虽然不会报错，但只有第一次调用会触发中止逻辑。

四、对比