abortsignal.timeout() 可为 fetch 提供原生超时控制,传入毫秒值返回自动 abort 信号,超时抛出 aborterror,需 try/catch 捕获并降级兼容旧浏览器。

可以使用 AbortSignal.timeout() 为原生 fetch 添加简洁、标准的超时控制,无需手动创建 AbortController 或启动定时器。
直接传入 timeout 信号即可
AbortSignal.timeout(ms) 是浏览器原生支持的静态方法(Chrome 109+、Firefox 119+、Safari 17.4+),它返回一个在指定毫秒后自动触发 abort 的信号对象。只需将其作为 signal 选项传给 fetch:
-
fetch(url, { signal: AbortSignal.timeout(5000) })表示 5 秒后自动中止请求 - 超时后,
fetch抛出DOMException(name === "AbortError"),可直接捕获处理 - 该信号是“一次性”的,不可复用,也不影响其他请求
配合 try/catch 处理超时异常
由于超时会以异常形式终止 Promise,推荐用 try/catch 明确区分网络失败、服务错误和超时场景:
async function fetchWithTimeout(url, timeout = 8000) {
try {
const res = await fetch(url, {
signal: AbortSignal.timeout(timeout)
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch (err) {
if (err.name === 'AbortError') {
throw new Error('请求已超时,请稍后重试');
}
throw err;
}
}
注意兼容性与降级方案
若需支持较老浏览器(如 Chrome 108 或更早),AbortSignal.timeout 未定义,应手动 fallback:
- 检查
typeof AbortSignal.timeout === 'function' - 不支持时,用
AbortController+setTimeout模拟相同行为 - 避免重复 abort:在定时器触发前,若请求已完成,需调用
controller.abort()清理(现代 timeout 方法已内置此逻辑)
不建议与手动 AbortController 混用
如果已有自己的 AbortController(例如用于用户主动取消),不要把 timeout() 和它的 signal 合并使用——二者独立触发 abort 会造成语义混乱。如需组合控制,应统一用一个 AbortController 并自行管理超时逻辑。










