实现重试策略（React Native 及其他）

Source: Dev.to

什么是重试策略？

重试策略是一种让你的应用在请求失败时自动重新尝试，而不是立即向用户显示错误的策略。

从用户的角度来看，一切都能正常工作：

“我发起了请求 → 我看到了加载指示 → 我得到了结果。”

在幕后，你的应用可能已经多次重试该请求，最终才成功。

为什么这很重要？

网络请求并不总是可靠的。失败可能由于临时的服务器问题（5xx 错误）、网络不稳定（超时、连接差）、限流或其他瞬时故障导致。

如果你立即显示错误，用户就必须手动重试，重新开始整个流程，并可能失去对应用的信任。

重试策略可以平滑这些临时问题，提升整体用户体验。这是一种在后端服务、云系统、分布式系统、消息队列等各类系统中通用的弹性模式。正确实现后，用户甚至不会察觉到出现了问题——这正是目标。

实现

// Helper to pause execution
const wait = (ms: number) =>
  new Promise((resolve) => setTimeout(resolve, ms));

type RetryOptions = {
  retries: number;
  delay: number;
  factor?: number; // exponential multiplier
};

async function retryRequest(
  fn: () => Promise<any>,
  { retries, delay, factor = 2 }: RetryOptions
): Promise<any> {
  let attempt = 0;

  while (attempt < retries) {
    try {
      // Try the request; if it succeeds, return the result
      return await fn();
    } catch (error: any) {
      attempt++;
      // If we've exhausted retries, re‑throw the error
      if (attempt >= retries) throw error;

      // Calculate exponential back‑off delay
      const backoff = delay * Math.pow(factor, attempt - 1);
      await wait(backoff);
    }
  }
}

// Example request function
const fetchUser = async () => {
  const response = await fetch("https://api.example.com/user");

  if (!response.ok) {
    const err: any = new Error("Request failed");
    err.response = { status: response.status };
    throw err;
  }

  return response.json();
};

// Wrapper that applies the retry policy
const getUserWithRetry = async () => {
  try {
    const data = await retryRequest(fetchUser, {
      retries: 3,
      delay: 1000, // initial delay in ms
    });

    console.log("Success:", data);
  } catch (error) {
    console.log("Final failure:", error);
  }
};

在需要获取用户信息的地方调用 getUserWithRetry()。如果请求因瞬时问题失败，重试策略会在后台自动启动并再次尝试请求。

结论

重试策略是一种简单却强大的方式，可提升可靠性、减少用户挫败感，并优雅地处理瞬时故障。它是一个小小的改动，却能让你的应用感觉更加稳定、更加适合生产环境。