JavaScript 请求重试中怎么在重试时动态调整超时时间参数-js教程-PHP中文网

JavaScript请求重试常用指数退避策略：每次超时按因子（如2）增长，叠加0~200ms随机抖动防雪崩；通过AbortController控制请求生命周期，封装retryFetch函数支持动态超时、jitter及自定义重试条件。

javascript 请求重试中怎么在重试时动态调整超时时间参数

在 JavaScript 请求重试中，动态调整超时时间最常用的方式是采用“指数退避（Exponential Backoff）”策略：每次重试将超时时间按倍数增长（如 ×1.5 或 ×2），同时可叠加随机抖动（jitter）避免请求集中冲击服务端。

使用 fetch + async/await 实现带动态超时的重试

核心思路是：每次重试前计算新的 timeout 值，并通过 AbortController 控制请求生命周期。

初始化基础超时（如 3000ms），设置最大重试次数（如 3 次）
第 n 次重试时，超时 = 基础值 × (退避因子)ⁿ⁻¹（例如 3000 × 2ⁿ⁻¹）
为防雪崩，可加入 0~200ms 随机抖动：timeout += Math.random() * 200
每次循环创建新的 AbortController，调用 abort() 清理上一次挂起请求

封装一个可配置的 retryFetch 函数

以下是一个轻量实用的封装示例（支持 timeout 动态增长、jitter、自定义重试条件）：

async function retryFetch(url, options = {}, {
  baseTimeout = 3000,
  maxRetries = 3,
  backoffFactor = 2,
  jitter = 200,
  shouldRetry = (err, response) => err || (response && !response.ok)
} = {}) {
  let lastError;
  for (let i = 0; i const timeoutId = setTimeout(() => controller.abort(), timeout);

try {
  const response = await fetch(url, {
    ...options,
    signal: controller.signal
  });
  clearTimeout(timeoutId);
  if (shouldRetry(null, response)) throw new Error(`HTTP ${response.status}`);
  return response;
} catch (err) {
  clearTimeout(timeoutId);
  lastError = err;
  if (i === maxRetries) break;
  // 可选：等待后重试（也建议指数退避）
  await new Promise(r => setTimeout(r, Math.min(100 * Math.pow(backoffFactor, i), 2000)));
}

} throw lastError; }