如何在API调用失败前执行最多3次重试？（React Web场景）

你的尝试方案问题分析 #

• 同步for循环无法等待异步的postTeam请求完成，if(success) break会在请求还没返回时就执行，导致直接触发3次请求，达不到"失败后重试"的效果
• finally里强制设置success = true，不管请求失败与否都会标记成功，逻辑完全错误
• 多次调用setIsSubmitting(false)会导致状态异常，不符合业务逻辑

推荐实现方式 #

可以封装一个通用的异步重试工具函数，利用async/await处理异步时序，确保每次请求完成后再决定是否重试：

通用重试函数 #

async function retryAsync(fn, maxRetries = 3) {
  let lastError;
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      return await fn(); // 请求成功直接返回结果
    } catch (error) {
      lastError = error;
      // 不是最后一次尝试的话，继续重试
      if (attempt === maxRetries - 1) break;
    }
  }
  throw lastError; // 所有重试失败，抛出最后一次的错误
}

修改调用代码 #

retryAsync(() => postTeam({ userId: user.id }))
  .then(() => {
    // 成功后的业务逻辑
  })
  .catch((errors) => {
    console.log(errors);
    trackApiError(new Error(errors));
  })
  .finally(() => {
    setIsSubmitting(false);
  });

方案优势 #

• 时序正确：每次请求完成后才判断是否重试，不会出现并发请求或无效循环
• 逻辑清晰：通用重试函数可复用在其他需要重试的API请求上
• 状态管理正确：setIsSubmitting(false)仅执行一次，避免状态混乱
• 完全符合要求：无需修改移动端和Web端共用的postTeam函数，仅在Web端调用代码处修改

内容的提问来源于stack exchange，提问作者MomasVII