JavaScript网络超时需外部控制，AbortController可真正中止fetch请求，Promise.race适用于通用超时逻辑，手动标志位处理非标准异步操作，async/await中结合signal与条件判断实现取消。
JavaScript 中网络超时不能靠 Promise 自身中断，必须通过外部流程控制来实现“及时放弃等待 + 避免无效处理”。核心不是让请求停在半路（除非 API 支持），而是让代码逻辑不再响应过期结果。
用 AbortController 真正中止 fetch 请求
这是现代标准做法，适用于 fetch、stream、encode 等原生支持 signal 的 API。它能从网络层切断连接，节省带宽和资源。
- 创建 AbortController 实例，获取其 signal
- 把 signal 传给 fetch 的 options 参数
- 用 setTimeout 或用户操作触发 controller.abort()
- 捕获错误时检查 err.name === 'AbortError'，区分取消与真实失败
示例：
const controller = new AbortController();fetch('/api/data', { signal: controller.signal })
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') console.log('请求已取消');
});
setTimeout(() => controller.abort(), 8000);
用 Promise.race 实现超时等待逻辑
适合所有 Promise 场景（包括不支持 signal 的封装函数），它不终止底层任务，但能确保你的业务逻辑不无限等待。
立即学习“Java免费学习笔记（深入）”；
- 构造一个延迟 reject 的 Promise，比如 new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), 5000))
- 和目标 Promise 一起传入 Promise.race()
- race 返回的 Promise 会在任一子 Promise 完成时结束
- 注意：fetch 本身仍在运行，只是你不再关心它的结果
可封装为通用函数：
function timeout(promise, ms) {return Promise.race([
promise,
new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);
}
// 使用
timeout(fetch('/api/data'), 5000)
.then(res => res.json())
.catch(err => console.error(err.message));
手动管理取消状态应对非标准异步操作
对 setTimeout、WebSocket、轮询、自定义定时任务等不支持 signal 的情况，需用标志位 + 清理逻辑模拟取消。
- 在 Promise 外部定义 let isCancelled = false
- 在回调中先判断 if (isCancelled) return
- 暴露 cancel() 方法，设标志位并清理资源（如 clearTimeout、close socket）
- 避免回调执行后仍调用 resolve/reject，造成状态冲突
例如轮询封装：
function createPolling(url, interval) {let isCancelled = false;
const id = setInterval(() => {
if (isCancelled) return;
fetch(url).then(res => res.json()).then(data => {
if (!isCancelled) console.log(data);
});
}, interval);
return {
cancel() {
isCancelled = true;
clearInterval(id);
}
};
}
在 async/await 中整合超时与取消
async 函数本身不可中断，但可通过 signal 和条件判断提前退出执行流，并在 finally 中做资源清理。
- 函数参数接收 { signal }（常来自 AbortController）
- await 前检查 if (signal?.aborted) throw new DOMException('Aborted', 'AbortError')
- 用 try/catch 捕获错误，finally 中关闭连接、清除定时器
- 避免 await 后继续执行无关逻辑
这样既响应超时，也兼容主动取消场景，逻辑清晰且不易遗漏清理。
