AbortController
最后更新：2026-10-28
AbortController AbortController
AbortController 是浏览器原生 API：把它的 signal 传给 fetch，调用 abort() 即可中途取消请求。组件卸载、参数变化、搜索防抖场景里，取消过期请求既省流量，更避免「旧响应覆盖新数据」的竞态 bug。
| 分组 | 数据与工程化 |
|---|---|
| 类型 | API |
| 引入版本 | 浏览器原生 API（DOM Living Standard） |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
const ctrl = new AbortController()
fetch('/api/search?q=' + kw, { signal: ctrl.signal })
.then(r => r.json())
.catch(err => {
if (err.name === 'AbortError') return // 主动取消，不算错误
showError(err)
})
ctrl.abort() // 触发：fetch 以 AbortError 拒绝⚙️ 参数
| signal | AbortSignal 实例，传给 fetch 的 options.signal；同一个 signal 可绑定多个请求，一次全取消。 |
|---|
返回值：构造函数返回 { signal, abort() }：signal 交给 fetch 监听，abort() 触发取消，请求以 AbortError 拒绝。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
点「发请求」进入 loading；在返回前点「取消请求」，状态变 aborted 而不是 error——被取消的请求不会更新任何 UI。💡 要点
⚠️ 注意 取消不是错误：catch 里必须单独识别 err.name === 'AbortError'，否则用户主动取消会被当成故障弹提示。
💡 提示 useEffect 的 cleanup 里 abort 上一次请求，是解决「快速切换 tab 数据错乱」竞态的标准解法。
ℹ️ 说明 同一个 signal 还可传给事件监听（addEventListener 的 signal 选项），abort 一次全部取消。
🏷️ 数据与工程化相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 请求已被取消还能恢复吗？
A 不能，连接已断开。需要暂停/恢复语义时要自己实现队列，或重新发起请求。
Q AbortError 和超时是一回事吗？
A 不是。超时可手动 setTimeout(() => ctrl.abort(), 5000) 实现，也可用 AbortSignal.timeout(5000) 一行代替（较新浏览器）。
Q 为什么组件卸载要取消请求？
A 卸载后组件不再需要数据，放任请求既浪费带宽，响应到达后还可能把过期数据写进新一次渲染。
