fetch 本身不支持直接设置超时时间，但可通过 abortcontroller 配合 promise.race 实现可控超时机制：创建 controller 并传入 signal，超时调用 abort() 触发 aborterror，再用 promise.race 竞态 fetch 与定时 reject 的 promise。
Fetch 本身不支持直接设置超时时间，但可以通过 AbortController 配合 Promise.race 实现可控的请求超时机制，避免请求无限挂起。
使用 AbortController 主动中断请求
AbortController 是浏览器原生提供的用于中止 fetch 请求的接口。它生成一个可被终止的 signal，在超时触发时调用 abort()，使 fetch 抛出 AbortError 异常。
关键点：
- 创建
const controller = new AbortController() - 将
controller.signal传入 fetch 的signal选项 - 在定时器到期后执行
controller.abort()
用 Promise.race 包裹 fetch 和超时 Promise
把 fetch 请求和一个延迟 reject 的 Promise 放进 Promise.race，谁先完成就取谁的结果——超时快就走 reject 分支，请求快就走 resolve 分支。
示例代码：
function fetchWithTimeout(url, options = {}, timeout = 5000) {
const controller = new AbortController();
const { signal } = controller;
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => {
controller.abort();
reject(new Error('Request timed out'));
}, timeout);
});
return Promise.race([
fetch(url, { ...options, signal }),
timeoutPromise
]);
}
// 使用
fetchWithTimeout('/api/data', { method: 'GET' }, 3000)
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error('Failed:', err.message));
注意兼容性和错误处理细节
部分旧版浏览器（如 IE）不支持 AbortController，需考虑降级或 polyfill；实际使用中还需区分错误类型：
-
err.name === 'AbortError'表示是超时主动中断 - 网络失败、4xx/5xx 状态码需在 fetch 成功后手动检查
response.ok - 建议统一封装错误分类逻辑，便于上层判断重试或提示
更健壮的封装建议（含重试与状态检查）
生产环境推荐进一步增强：加入响应状态校验、自动 JSON 解析、可选重试等。例如：
- 在 fetch 成功后增加
if (!res.ok) throw new Error(`HTTP ${res.status}`) - 对特定错误（如网络断开、超时）做有限次数重试
- 将超时时间设为可配置项，并根据接口重要性差异化设置（如查询 5s，提交 10s）
