Fetch API 通过 AbortController 可实现请求超时与手动中断：创建控制器并传入 signal，调用 abort() 中止请求；结合 Promise.race 和 setTimeout 模拟超时，封装为 timeoutFetch 工具函数；需注意浏览器兼容性及服务端仍可能执行请求。
Fetch API 本身不直接支持超时和中断，但可以通过 AbortController 配合 timeout 逻辑来实现请求超时与手动中断。
使用 AbortController 实现请求中断
AbortController 是浏览器原生提供的信号控制机制，可用于主动终止 fetch 请求。它生成一个 signal 对象，传入 fetch 的 options 中，调用 abort() 即可中止请求。
- 创建控制器：
const controller = new AbortController(); - 获取信号：
const signal = controller.signal; - 在 fetch 中传入：
fetch(url, { signal }) - 中断请求：
controller.abort();（触发AbortError）
手动添加超时逻辑
Fetch 没有内置 timeout 参数，需结合 Promise.race 和 AbortController 模拟超时行为：启动请求的同时启动定时器，任一先完成即结束竞态。
- 设置超时时间（如 5000ms），用
setTimeout触发controller.abort() - 用
Promise.race([fetch(...), timeoutPromise])包裹请求 - 捕获
AbortSignal.reason.name === 'AbortError'判断是否因超时被中断 - 注意：超时后仍需清理定时器，避免内存泄漏
封装一个带超时的 fetch 工具函数
把上述逻辑封装成复用函数，提升开发效率和可维护性：
立即学习“Java免费学习笔记（深入）”；
- 接受 url、options、timeout（毫秒）三个参数
- 内部创建
AbortController，并设置定时器自动 abort - 返回 fetch Promise，并在 reject 时统一处理超时/网络错误/abort
- 示例调用：
timeoutFetch('/api/data', { method: 'POST' }, 8000)
注意事项与兼容性提醒
AbortController 在现代浏览器中已广泛支持（Chrome 66+、Firefox 57+、Safari 15.4+），但 IE 完全不支持。若需兼容旧环境，需引入 polyfill 或降级使用 XMLHttpRequest。
- fetch 被 abort 后，不会自动关闭底层连接，但后续响应会被忽略
- 重复调用
abort()无副作用，但不可恢复 - 服务端可能仍在处理请求，超时仅影响客户端等待行为
- 注意区分
Network Error、AbortError和业务错误，便于精准重试或提示
