promise.race适合请求超时控制，因其返回首个settled的promise结果，实现“谁先完成谁生效”；但仅忽略慢响应而非真正取消，需配合reject超时promise并包裹完整请求链路。
Promise.race 为什么适合做请求超时控制
因为 Promise.race 只返回第一个 settled（fulfilled 或 rejected）的 Promise 结果，不等其余完成。这正好匹配“谁先返回谁胜出”的超时场景：一个发请求，一个定时 reject，谁快谁生效。
注意：它不是“取消”慢请求，只是忽略其后续结果；底层 HTTP 连接仍可能继续跑完，但 JS 不再监听。
- 适用于单次请求需强时效性（如实时搜索建议、心跳探测）
- 不能替代 AbortController 的真正中断，仅做结果裁决
- 若超时 Promise 先 resolve（比如误写成
setTimeout(() => resolve(), 3000)），会错误认为请求成功
正确构造超时 Promise 的常见写法
超时 Promise 必须是 rejected 状态，否则 Promise.race 可能返回一个假成功值（比如 "timeout" 字符串而非 error）。否则业务层容易把超时当成有效响应。
- 推荐用
Promise.reject(new Error("timeout"))显式抛错 - 避免
Promise.resolve("timeout")—— 这会让 race 返回字符串，破坏错误处理流程 - 超时时间建议设为毫秒整数，如
5000，不要传字符串"5000" - 使用
setTimeout即可，无需额外封装成 Promise 函数（除非复用频繁）
const timeout = (ms) => new Promise((_, reject) =>
setTimeout(() => reject(new Error("request timeout")), ms)
);
和 fetch 配合时必须处理的两个坑
fetch 本身不超时，且网络断开、DNS 失败等会直接 reject；但若服务器无响应（如卡住），fetch 会一直 pending —— 这正是需要 Promise.race 补位的地方。
-
fetch成功返回 Response 后，还需调用.json()或.text()才真正解析内容；这些方法也可能卡住（尤其大响应体），所以超时应包住整个链路，不止fetch() - 如果只 race
fetch(url)，而没 racefetch(url).then(r => r.json())，一旦响应头到达但 body 流式读取缓慢，就会漏掉超时 - 务必在 race 后统一 catch 错误，区分是网络错误、超时还是 JSON 解析失败
Promise.race([
fetch("/api/data").then(r => r.json()),
timeout(8000)
])
.then(data => console.log(data))
.catch(err => {
if (err.message === "request timeout") {
console.error("接口超时");
} else {
console.error("请求异常", err);
}
});
比 Promise.race 更稳妥的现代替代方案
原生 fetch 在 Chrome 123+、Firefox 125+ 已支持 signal 选项，配合 AbortController 能真正中止请求，不只是丢弃结果。
-
AbortController触发 abort 后，fetch会立即 reject 并释放连接资源 - 不需要手动构造 timeout Promise，代码更线性
- 旧浏览器（如 IE、旧版 Safari）不支持，需 fallback 到
Promise.race方案 - 注意：
abort()调用后，controller.signal 不可重用，每次请求需新建
const controller = new AbortController();
setTimeout(() => controller.abort(), 8000);
fetch("/api/data", { signal: controller.signal })
.then(r => r.json())
.catch(err => {
if (err.name === "AbortError") {
console.error("请求已被中止");
}
});
实际项目中，超时逻辑往往藏在封装好的 request 函数里；别只 race fetch 调用，要 race 到数据真正可用那一刻。AbortController 是方向，但兼容性兜底仍得靠 Promise.race + 拒绝态 timeout。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
