JavaScript中fetch配合AbortSignal取消请求的核心是新建AbortController实例并传signal给fetch，调用abort()中止请求并抛出AbortError；需单独为每次请求创建控制器，用err.name==='AbortError'判断并忽略该错误。
JavaScript 中使用 fetch 配合 AbortSignal 实现请求取消，核心是通过 AbortController 创建信号，并传给 fetch 的 signal 选项。一旦调用 controller.abort()，关联的请求就会中止，同时 fetch 会抛出 AbortError。
创建 AbortController 并传入 signal
每次需要可取消的请求时，都应新建一个 AbortController 实例，避免多个请求共用同一信号导致误取消。
- 调用
new AbortController()得到控制器对象 - 将
controller.signal作为signal选项传入fetch - 后续调用
controller.abort()即可中止该次请求
捕获并处理 AbortError
fetch 在被中止时会拒绝 Promise，并抛出类型为 DOMException 的错误，其 name 为 "AbortError"。需在 catch 中识别并区分其他网络或业务错误。
- 用
err.name === 'AbortError'判断是否为取消导致的失败 - 通常不需要重试或报错提示，可直接忽略或记录日志
- 避免把
AbortError当作异常弹窗或上报
常见使用场景示例
比如用户输入搜索关键词时频繁触发请求，只保留最后一次：
立即学习“Java免费学习笔记（深入）”；
- 每次新请求前，先检查旧的
controller是否存在，调用.abort() - 立即创建新的
AbortController，发起新请求 - 确保信号只绑定当前有效请求，不干扰历史或并发请求
与 async/await 配合的写法
在异步函数中，推荐用 try/catch 包裹 await fetch(...)，并在外部控制取消时机：
- 把
controller保存在作用域内（如组件实例、闭包变量） - 在组件卸载、表单提交、按钮禁用等时机主动调用
abort() - 取消后无需手动清理 signal，但应避免继续 await 已 reject 的 Promise
