本文讲解如何用 async/await 实现安全、可持续的异步无限轮询，替代易导致调用栈溢出的递归式重试+轮询混合写法，并提供健壮的错误重试与间隔控制方案。
本文讲解如何用 async/await 实现安全、可持续的异步无限轮询，替代易导致调用栈溢出的递归式重试+轮询混合写法，并提供健壮的错误重试与间隔控制方案。
在 JavaScript 中，使用递归调用（如 return fetchData(...) 在 catch 中反复触发自身）实现“无限轮询”，看似简洁，实则存在两个关键隐患：调用栈持续增长风险（尤其在错误频繁时未清栈）、以及轮询逻辑与错误重试逻辑耦合过紧，难以独立控制重试策略与轮询节奏。
正确的做法是将「数据获取 + 重试」和「轮询调度」分离：前者专注单次请求的健壮性（含指数退避、最大重试次数等），后者用清晰的 while (true) 循环驱动周期性执行，配合 await 自然让出主线程，避免阻塞且无栈累积。
以下是推荐的工程化实现：
// 工具函数：可控延迟 Promise
function pause(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 单次请求封装：带有限重试（非无限！），失败后抛出异常
async function fetchWithRetry(url, options = {}) {
const { maxRetries = 3, baseDelay = 1000 } = options;
for (let i = 0; i <= maxRetries; i++) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const contentType = response.headers.get('content-type');
if (!contentType?.includes('application/json')) {
throw new TypeError('Response is not JSON');
}
return await response.json();
} catch (err) {
if (i === maxRetries) throw err; // 最后一次失败，向外抛出
const delay = baseDelay * Math.pow(2, i); // 指数退避
console.warn(`Attempt ${i + 1} failed:`, err.message, `— retrying in ${delay}ms`);
await pause(delay);
}
}
}
// 真正的无限轮询：清晰、可读、无栈风险
async function startPolling(url, interval = 1000) {
while (true) {
try {
const data = await fetchWithRetry(url, { maxRetries: 2 });
console.log('[✅ Poll success]', data);
} catch (err) {
console.error('[❌ Poll failed after retries]', err);
// 注意：此处不中断轮询，继续下一轮——符合“无限”语义
// 如需失败后暂停再试，可在此处加额外 delay，例如：await pause(5000);
}
await pause(interval);
}
}
// 启动轮询（建议添加 abort 控制机制，见下方说明）
startPolling('test.json', 2000);✅ 关键优势说明：
- while (true) + await 是事件循环友好的无限循环，每次迭代都是独立的微任务，零调用栈累积；
- fetchWithRetry 职责单一：只负责“尽力获取一次有效数据”，失败即止，不隐含调度逻辑；
- 轮询间隔（interval）与重试间隔（baseDelay）完全解耦，便于独立调优；
- 支持指数退避，避免服务端雪崩；
- 错误被显式捕获并记录，轮询本身永不停止（除非手动终止），符合监控类场景需求。
⚠️ 重要注意事项：
- 生产环境务必添加终止机制，例如通过 AbortController 或全局标志位控制 while 循环退出；
- 避免在页面隐藏（visibilitychange）或标签页非激活时持续轮询，应监听 document.hidden 并暂停；
- 高频轮询需评估服务端压力，建议结合服务端 SSE 或 WebSocket 替代轮询；
- fetch 默认不携带 cookies，如需认证，请传入 { credentials: 'include' }。
总结：无限轮询不是“无限递归”，而是“无限迭代”。用 async 函数 + while(true) + await 构建主循环，辅以职责分明的重试工具函数，才能写出既健壮又可维护的前端轮询逻辑。
