Fetch 本身不支持超时,但可通过 AbortController 结合 setTimeout 实现“超时即取消”:每次请求新建 controller 并传 signal,超时调 abort(),捕获 AbortError 区分超时与网络错误,封装为可复用函数并清理定时器。

Fetch 本身不支持直接设置超时,但结合 AbortController 可以手动中断请求,实现“超时即取消”的熔断效果。关键不是等待超时再处理,而是在指定时间后调用 abort() 主动终止未完成的请求。
创建 AbortController 并传入 signal
每次发起请求前新建一个 AbortController 实例,把它的 signal 挂到 fetch 的 options 上:
- 一个
signal只能被触发一次(abort 或 timeout),不可复用 - 必须在 fetch 调用前绑定 signal,否则无效
- 多个请求需各自创建独立的 controller,避免互相干扰
用 setTimeout 触发 abort 实现超时控制
启动请求的同时设定定时器,超时后调用 controller.abort():
- 超时时间建议设为比服务端超时略短(比如服务端设 10s,前端设 8s)
- abort 后 fetch 会立即 reject,抛出
DOMException: AbortError - 注意:abort 不等于报错,是正常流程中断,应单独捕获处理
正确捕获和区分 abort 与网络错误
不能只靠 try/catch 判断失败原因,要检查 error.name 或 signal.aborted 状态:
立即学习“Java免费学习笔记(深入)”;
-
error.name === 'AbortError'表示是主动取消,可视为超时熔断 -
!signal.aborted && error.name === 'TypeError'多为网络异常(如离线、CORS) - 避免把 abort 当作业务错误重试,否则可能反复触发熔断
封装成可复用的超时 fetch 函数
把上述逻辑收拢,便于统一管理超时策略:
- 参数支持传入 timeout(毫秒),默认 5000
- 返回 Promise,reject 时附带 { type: 'timeout' | 'network' | 'other', error }
- 内部自动清理定时器,防止内存泄漏


















