使用 abortcontroller 实例的 abort() 方法可以取消正在进行的 fetch 请求。具体做法是在发起请求前创建控制器，将它的 signal 属性传递给 fetch 的第二个参数配置对象；当需要终止时调用控制器的 abort() 方法，此时请求会立即中断并抛出 aborterror。
如何初始化 AbortController 并关联信号
在发起网络请求之前，必须先实例化一个 AbortController 对象。这个对象负责管理请求的生命周期，其核心资产是 signal 属性。将该信号作为配置项的一部分传入 fetch 函数，浏览器就能建立监听通道，一旦信号被标记为中止，底层网络传输就会停止。
const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', {
signal: signal
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
if (error.name === 'AbortError') {
console.log('Request cancelled');
} else {
console.error('Fetch failed:', error);
}
});
上述代码展示了标准的初始化流程。首先通过 new AbortController() 创建实例，提取 signal 后放入 fetch 的配置对象中。这种写法确保了请求与控制器之间的绑定关系，后续可以通过控制器随时干预请求状态。
如何在特定条件下触发取消操作
实际开发中通常需要在用户交互或超时等场景下主动取消请求。只需调用控制器实例的 abort() 方法即可向所有绑定了该信号的请求发送中止指令。该方法没有参数，执行后会立即改变信号状态，导致挂起的 fetch 承诺进入拒绝状态。
const controller = new AbortController();
const signal = controller.signal;
// 模拟异步取消逻辑
setTimeout(() => {
controller.abort();
}, 5000);
fetch('https://api.example.com/slow-data', {
signal: signal
})
.then(response => response.json())
.catch(error => {
if (error.name === 'AbortError') {
console.log('Request timed out or cancelled');
}
});
这段代码演示了基于时间的取消机制。设置一个定时器，在 5 秒后调用 controller.abort()。如果请求在此期间未完成，fetch 将捕获到中止错误。开发者可以根据业务需求将触发条件替换为用户点击取消按钮、页面卸载或其他事件监听器。
如何处理取消请求抛出的异常类型
当请求被成功取消时，catch 块接收到的错误对象具有特定的属性特征。区分中止错误与其他网络错误至关重要，以避免将正常的用户取消行为误报为系统故障。检查错误对象的 name 属性是最可靠的判断方式。
fetch('https://api.example.com/data', {
signal: controller.signal
})
.catch(error => {
if (error.name === 'AbortError') {
// 处理取消逻辑
updateUI('Request was cancelled by user');
} else {
// 处理其他网络错误
showError(error.message);
}
});
在错误处理分支中，通过判断 error.name 是否等于 'AbortError' 来确认是否为取消操作引发的异常。这种区分保证了程序能够正确响应不同的中断原因，维持应用状态的稳定性。未取消的其他错误则按常规网络异常流程处理。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
