Next.js中getServerSideProps内axios请求失败如何重试？

下面提供几种可行的方案来处理请求失败后的重试逻辑：

方案一：手动实现重试逻辑 #

封装一个带重试机制的请求函数，指定最大重试次数，当请求失败时自动重试，直到成功或达到重试上限。

export async function getServerSideProps() {
  let ImagesList = {};
  // 定义带重试的请求函数
  const fetchWithRetry = async (url, maxRetries = 3) => {
    let retries = 0;
    while (retries < maxRetries) {
      try {
        const response = await axios.get(url);
        return response.data;
      } catch (err) {
        retries++;
        // 重试前添加延迟，避免频繁请求
        if (retries < maxRetries) {
          await new Promise(resolve => setTimeout(resolve, 1000 * retries));
        } else {
          throw err; // 重试耗尽后抛出错误
        }
      }
    }
  };

  try {
    ImagesList = await fetchWithRetry("https://www.*****.com/api/home");
  } catch (err) {
    // 处理最终失败的情况，比如返回默认数据或记录日志
    console.error("请求最终失败:", err);
  }

  return {
    props: {
      ImagesList,
    }
  }
}

方案二：使用Axios拦截器实现全局重试 #

通过Axios的响应拦截器统一处理请求失败后的重试逻辑，适合多个请求需要重试的场景。

// 先配置Axios响应拦截器
axios.interceptors.response.use(
  response => response,
  async error => {
    const { config } = error;
    // 设置默认重试次数和当前重试计数
    config.retry = config.retry || 3;
    config.retryCount = config.retryCount || 0;

    // 判断是否需要重试：网络错误或服务器内部错误（5xx）
    if (config.retryCount < config.retry && (error.code === 'ECONNABORTED' || (error.response?.status >= 500))) {
      config.retryCount++;
      // 指数退避延迟，避免短时间内重复请求
      await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, config.retryCount)));
      return axios(config);
    }
    return Promise.reject(error);
  }
);

export async function getServerSideProps() {
  let ImagesList = {};

  try {
    const response = await axios.get("https://www.*****.com/api/home");
    if (response.data) {
      ImagesList = response.data;
    }
  } catch (err) {
    console.error("请求最终失败:", err);
  }

  return {
    props: {
      ImagesList,
    }
  }
}

方案三：使用第三方库axios-retry #

axios-retry是专门为Axios设计的重试库，配置简单，支持多种重试策略。

1. 安装依赖：

npm install axios-retry

2. 在代码中配置使用：

import axiosRetry from 'axios-retry';

// 配置Axios重试规则
axiosRetry(axios, {
  retries: 3, // 最大重试次数
  retryDelay: (retryCount) => {
    return retryCount * 1000; // 每次重试延迟递增1秒
  },
  retryCondition: (error) => {
    // 指定触发重试的错误类型
    return error.code === 'ECONNABORTED' || (error.response?.status >= 500 && error.response?.status < 600);
  }
});

export async function getServerSideProps() {
  let ImagesList = {};

  try {
    const response = await axios.get("https://www.*****.com/api/home");
    if (response.data) {
      ImagesList = response.data;
    }
  } catch (err) {
    console.error("请求最终失败:", err);
  }

  return {
    props: {
      ImagesList,
    }
  }
}

注意事项 #

• 不要设置无限重试，避免给目标服务器造成压力，建议控制重试次数在3-5次以内。
• 仅对幂等请求（如GET）使用重试，非幂等请求（如POST）重试可能导致重复提交数据，需谨慎处理。
• 最终重试失败时，建议添加兜底逻辑，比如返回默认数据、记录错误日志等。

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