轮询的核心是用Promise链控制重试时机，关键在于状态满足即停、失败可退避、超时能终止；函数支持自定义成功条件、最大次数、间隔与超时，并可扩展指数退避和取消能力。
轮询的核心逻辑：用 Promise 链控制重试时机
轮询不是简单 setInterval + fetch，关键在于“状态满足就停、失败可退避、超时能终止”。Promise 的链式特性天然适合表达这种“尝试→判断→继续或结束”的流程。每次请求返回一个 Promise，根据响应决定下一次是否发起、何时发起。
基础轮询函数：支持成功条件、最大次数和间隔
下面是一个轻量、无依赖的轮询函数，用 async/await + Promise 封装，清晰易读：
function pollApi(requestFn, {
condition = (res) => res.status === 'success',
maxAttempts = 10,
interval = 1000,
timeout = 10000
} = {}) {
let startTime = Date.now();
<p>const attempt = async (count = 1) => {
// 超时检查
if (Date.now() - startTime > timeout) {
throw new Error(<code>Polling timed out after ${timeout}ms</code>);
}</p><pre class="brush:php;toolbar:false;">try {
const res = await requestFn();
if (condition(res)) {
return res; // ✅ 满足条件，终止轮询
}
// ❌ 不满足，且未达上限，等待后重试
if (count < maxAttempts) {
await new Promise(r => setTimeout(r, interval));
return attempt(count + 1);
}
throw new Error(`Max attempts (${maxAttempts}) reached, last response:`, res);
} catch (err) {
// 请求失败也计入次数（可根据需要区分网络错误与业务错误）
if (count < maxAttempts) {
await new Promise(r => setTimeout(r, interval));
return attempt(count + 1);
}
throw err;
}};
return attempt(); }
使用示例：轮询订单支付状态
假设接口返回 { status: 'processing' | 'paid' | 'failed', order_id }，我们等它变成 'paid'：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“Java免费学习笔记（深入）”；
const checkOrderStatus = () =>
fetch('/api/order/status?order_id=123')
.then(r => r.json());
<p>pollApi(checkOrderStatus, {
condition: (data) => data.status === 'paid',
maxAttempts: 12,
interval: 2000,
timeout: 30000
})
.then(result => console.log('✅ 支付成功:', result))
.catch(err => console.error('❌ 轮询失败:', err));进阶建议：增加指数退避与取消能力
生产环境建议增强两点：
-
指数退避：把
interval替换为Math.min(10000, interval * Math.pow(2, count - 1))，避免高频刷挂服务 -
取消能力：传入
AbortSignal到 fetch，并在轮询中途调用abort()；或返回一个带.cancel()方法的对象封装 Promise
不需要复杂库，几行 Promise 就能稳稳撑起轮询需求。重点是把“何时停”和“何时再试”的判断逻辑显式写清楚，而不是靠定时器硬扛。
