Promise.race实现请求超时中止的核心是让真实请求与定时拒绝Promise竞争，谁先完成即生效；但race本身不取消网络请求，需配合AbortController调用abort()才能真正终止fetch。
用 Promise.race 实现请求超时中止，核心思路是：把「真实请求」和「定时器拒绝」两个 Promise 一起传入 race，谁先完成（fulfilled 或 rejected），就以它的结果为准。一旦超时 Promise 先触发 reject，整个 race 就结束，后续请求即使返回也不会被处理——但注意：这**不会自动取消网络请求本身**，只是提前放弃响应处理。
基础写法：fetch + setTimeout 模拟超时
最简实现如下：
（注意：此方式不真正取消 fetch 请求，仅控制 JS 层逻辑）
- 用
new Promise包裹fetch，让它可被 race 竞争 - 另一个 Promise 在指定毫秒后
reject(new Error('timeout')) - 两者传入
Promise.race([fetchP, timeoutP])
示例代码：
立即学习“Java免费学习笔记（深入）”；
function fetchWithTimeout(url, timeout = 5000) {
const fetchPromise = fetch(url)
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
});
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => reject(new Error('Request timed out')), timeout);
});
return Promise.race([fetchPromise, timeoutPromise]);
}
// 使用
fetchWithTimeout('/api/data', 3000)
.then(data => console.log('Success:', data))
.catch(err => console.error('Failed:', err.message)); // 可能是网络错误，也可能是 'Request timed out'
更健壮的写法：配合 AbortController（推荐）
Promise.race 本身不中断底层请求，但现代浏览器支持 AbortController 主动取消 fetch。可以结合使用：超时触发 abort()，让 fetch 主动终止，避免资源浪费。
- 创建
AbortController实例，把signal传给fetch - 在
setTimeout中调用controller.abort() - fetch 被 abort 后会自动 reject，且
race仍能捕获这个 rejection
示例：
function fetchWithAbortAndRace(url, timeout = 5000) {
const controller = new AbortController();
const fetchPromise = fetch(url, { signal: controller.signal })
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
});
const timeoutPromise = new Promise((_, reject) => {
setTimeout(() => {
controller.abort(); // 主动取消请求
reject(new Error('Request timed out'));
}, timeout);
});
return Promise.race([fetchPromise, timeoutPromise]);
}
注意事项与常见坑
-
fetch 被 abort 后抛出的错误类型是
DOMException（name 为 'AbortError'），不是普通 Error，判断时可用err.name === 'AbortError' -
Promise.race只取第一个 settled 的 Promise，不管它是 resolve 还是 reject；所以超时 reject 和请求成功 resolve 是“竞争”关系，无需额外判断状态 - 如果请求本就很快（比如本地 mock），超时逻辑完全不会生效，这是预期行为
- 不建议对多个并发请求共用一个
AbortController，每个请求应独立控制
封装成可复用工具函数（带默认配置）
你可以进一步封装成支持 options 的函数，例如：
function timeoutFetch(url, options = {}) {
const { timeout = 8000, ...fetchOptions } = options;
const controller = new AbortController();
const fetchP = fetch(url, { ...fetchOptions, signal: controller.signal })
.then(r => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`)));
const timeoutP = new Promise((_, reject) => {
setTimeout(() => {
controller.abort();
reject(new Error(`Timeout after ${timeout}ms`));
}, timeout);
});
return Promise.race([fetchP, timeoutP]);
}
这样既利用了 Promise.race 的竞态控制能力，又通过 AbortController 实现了真正的请求中止，兼顾逻辑清晰与资源友好。
