JavaScript 请求重试中怎么实现带延迟队列的异步请求重试-js教程-PHP中文网

javascript中实现带延迟队列的异步请求重试需三要素：指数退避（递归promise+闭包控制延迟）、队列化错峰（独立delay防并发冲击）、abortcontroller取消（清理timer与fetch signal），并可封装为react自定义hook统一管理状态。

javascript 请求重试中怎么实现带延迟队列的异步请求重试

在 JavaScript 中实现带延迟队列的异步请求重试，核心是控制重试时机（指数退避）、避免并发冲突（队列化）、并保持调用简洁。下面给出一个轻量、可复用、生产可用的实现思路。

用 Promise + setTimeout 实现延迟重试

每次失败后不立即重试，而是按策略（如 100ms → 200ms → 400ms）延时再发起下一次请求。关键点是：用 递归 Promise 链 + 闭包保存当前延迟时间，避免状态污染。

示例：

function retryFetch(url, options = {}, delay = 100, maxRetries = 3) {
  return fetch(url, options)
    .then(res => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.json();
    })
    .catch(err => {
      if (maxRetries  {
        setTimeout(() => {
          resolve(
            retryFetch(url, options, delay * 2, maxRetries - 1)
          );
        }, delay);
      });
    });
}

用队列管理多个并发重试请求

当多个请求几乎同时失败，需防止它们“扎堆”在同一个时间点重试（比如都等 1s 后发），造成服务端压力。引入简单队列，让重试任务错峰执行。

做法：维护一个待重试任务数组；每次只运行队首任务，它完成或失败后，自动触发下一个。延迟由每个任务独立计算，不共享计时器。

示例（简化版队列）：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

class RetryQueue {
  constructor() {
    this.queue = [];
    this.isRunning = false;
  }
<p>add(taskFn, delay, maxRetries) {
this.queue.push({ taskFn, delay, maxRetries });
if (!this.isRunning) this.run();
}</p><p>run() {
if (this.queue.length === 0) {
this.isRunning = false;
return;
}
this.isRunning = true;</p><pre class="brush:php;toolbar:false;">const { taskFn, delay, maxRetries } = this.queue.shift();
setTimeout(() => {
  taskFn().catch(() => {
    if (maxRetries > 0) {
      this.add(taskFn, delay * 2, maxRetries - 1);
    }
  });
}, delay);

} }

// 使用 const queue = new RetryQueue(); queue.add( () => fetch('/api/data').then(r => r.json()), 200, 2 );