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 模拟超时行为：启动请求的同时启动定时器，任一先完成即结束竞态。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 设置超时时间（如 5000ms），用
setTimeout触发controller.abort() - 用
Promise.race([fetch(...), timeoutPromise])包裹请求 - 捕获
AbortSignal.reason.name === 'AbortError'判断是否因超时被中断 - 注意：超时后仍需清理定时器，避免内存泄漏
封装一个带超时的 fetch 工具函数
把上述逻辑封装成复用函数，提升开发效率和可维护性：
- 接受 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和业务错误，便于精准重试或提示
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
