API失败重试时如何避免请求堆积和内存泄漏？

这个问题的核心在于递归调用和异步任务的管理。表面上你限制了重试次数，但实际上每次失败都会触发一个新的异步任务，而这些任务并没有被正确清理或控制，导致请求堆积和内存占用飙升。

原理是这样的：setTimeout 会将回调函数放入事件队列中，即使上一次的请求还没有完成，新的任务依然会被创建。如果接口连续失败多次，就会有大量未完成的任务堆积在事件队列里，最终导致雪崩效应。

解决这个问题的关键是引入一个更可控的重试机制，避免递归调用带来的副作用。我们可以用循环加延迟的方式来实现指数退避，而不是依赖递归。下面是一个改进的实现：

async function requestWithRetry(url, retries = 3) {

  let lastError; // 用来保存最后一次错误

  for (let attempt = 0; attempt <= retries; attempt++) {

    try {

      // 尝试发起请求

      const response = await fetch(url);

      if (!response.ok) {

        // 如果响应状态码不是 2xx，抛出错误

        throw new Error(HTTP error! status: ${response.status});

      }

      return response; // 成功时直接返回响应

    } catch (err) {

      lastError = err; // 保存错误信息

      if (attempt < retries) {

        // 计算指数退避的延迟时间

        const delay = Math.pow(2, attempt) * 1000;

        console.log(Request failed, retrying in ${delay}ms...);

        // 使用 await 和 Promise 实现延迟，避免递归

        await new Promise(resolve => setTimeout(resolve, delay));

      }

    }

  }

  // 如果所有重试都失败了，抛出最后一次错误

  throw lastError;

}



// 调用示例

requestWithRetry('https://example.com/api', 5)

  .then(response => console.log('Success:', response))

  .catch(err => console.error('All retries failed:', err));

这段代码的逻辑是这样的：我们使用 for 循环来控制重试次数，每次失败后通过 await 和 Promise 的组合实现延迟，而不是用递归。这样可以确保每次重试都是在前一次尝试完全结束之后才开始，不会出现任务堆积的情况。

几个关键点：
1. await fetch(url) 确保每次请求是顺序执行的，只有当前请求完成（无论成功还是失败）才会进入下一次循环。
2. 使用 Math.pow(2, attempt) * 1000 来计算指数退避的时间，保证每次重试的间隔是逐渐增加的。
3. 在每次失败后打印日志，方便调试和观察重试行为。
4. 如果所有重试都失败了，最后抛出最后一次捕获的错误，方便调用方处理。

这种实现方式的好处是：
- 避免了递归调用可能导致的任务堆积问题。
- 内存占用更加可控，因为每次只会有一次异步任务在运行。
- 代码结构清晰，易于维护和扩展。

如果你在实际项目中还需要更复杂的功能，比如支持取消请求或者动态调整重试策略，可以考虑结合 AbortController 或者第三方库如 axios-retry 来实现。不过对于大多数场景来说，上面的实现已经足够用了。

希望这个方案能帮你解决问题！

你的问题确实是个常见的坑，递归加定时器的实现方式虽然简单，但很容易引发请求堆积和内存泄漏。主要原因是每次失败后，新的请求并没有正确管理起来，导致多个异步任务同时运行，最终失控。

这里给你一个改进版的实现，用Promise包装整个逻辑，并且确保每次重试时只有一个请求在运行：

function requestWithRetry(url, retries = 3) {

  return new Promise((resolve, reject) => {

    const attempt = (currentRetries) => {

      fetch(url)

        .then(response => {

          if (!response.ok) throw new Error('Request failed');

          resolve(response); // 成功就直接resolve

        })

        .catch(err => {

          if (currentRetries > 0) {

            setTimeout(() => attempt(currentRetries - 1), 1000 * Math.pow(2, retries - currentRetries));

          } else {

            reject(err); // 超过重试次数就reject

          }

        });

    };

    attempt(retries);

  });

}

重点来了：
1. 使用一个内部函数 attempt 来控制重试逻辑，避免外部递归调用导致混乱。
2. 每次重试前，先等待上一次请求完成，再决定是否继续重试。
3. 别忘了检查 response.ok，否则即使接口返回了200，也可能数据有问题。

另外提醒一下，指数退避的时间计算公式要稍微调整下，不然第一次退避可能等太久。现在的写法是基于剩余重试次数动态调整等待时间。

最后的安全建议：如果API失败可能是服务器端的问题，考虑加上全局的请求队列限制，防止客户端疯狂重试导致服务雪崩。记得在生产环境设置合理的超时时间，别让用户一直等着！