Axios 如何重试 5xx 请求

当使用Axios进行HTTP请求时，如果遇到5xx错误（即服务器错误），可以通过几种不同的方式来实现自动重试。

1. 使用axios-retry库

axios-retry是一个非常流行的库，它可以很容易地通过Axios来实现请求的自动重试。首先，您需要安装这个库：

bash
npm install axios-retry

然后，在您的代码中引入并设置重试策略，例如：

javascript
const axios = require('axios');
const axiosRetry = require('axios-retry');

// 创建Axios实例
const axiosInstance = axios.create({
  // 配置...
});

// 安装axios-retry插件，配置自动重试
axiosRetry(axiosInstance, {
  retries: 3, // 设置重试次数
  retryCondition: (error) => {
    // 只对5xx的服务器错误进行重试
    return error.response && error.response.status >= 500;
  },
  retryDelay: (retryCount) => {
    // 重试间隔时间的计算，这里使用了指数退避策略
    return axiosRetry.exponentialDelay(retryCount);
  }
});

// 之后使用axiosInstance进行请求
axiosInstance.get('https://example.com/api')
  .then(response => {
    // 处理response
  })
  .catch(error => {
    // 处理error
  });

2. Axios的拦截器

可以使用Axios的拦截器(interceptors)功能来实现重试逻辑。拦截器允许我们在请求或响应被处理之前对它们进行拦截并执行代码。

javascript
const axios = require('axios');

// 设置重试次数的计数器
const MAX_RETRIES = 5;
let retries = 0;

axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
  if (err.response && err.response.status >= 500 && retries < MAX_RETRIES) {
    retries += 1; // 增加重试计数
    return axios(err.config); // 重新发起请求
  }
  return Promise.reject(err); // 如果不满足重试条件，则返回错误
});

// 使用axios请求
axios.get('https://example.com/api')
  .then(response => {
    // 处理response
  })
  .catch(error => {
    // 处理error
  });

3. 手动重试

最后，我们还可以手动实现重试逻辑。例如，可以创建一个函数，该函数封装了Axios请求，并在捕获到5xx错误时进行递归调用重试。

javascript
const axios = require('axios');

function requestWithRetry(url, retries = 5) {
  return axios.get(url)
    .then(response => response)
    .catch(error => {
      if (error.response && error.response.status >= 500 && retries > 0) {
        // 等待一段时间后重试
        return new Promise(resolve => {
          setTimeout(() => resolve(requestWithRetry(url, retries - 1)), 1000);
        });
      }
      // 如果重试次数用完或其他错误就正式抛出错误
      throw error;
    });
}

// 使用函数请求
requestWithRetry('https://example.com/api')
  .then(response => {
    // 处理response
  })
  .catch(error => {
    // 处理error
  });

在上面的例子中，requestWithRetry函数尝试发起GET请求，如果响应是5xx错误，并且没有达到重试次数上限，它将等待1秒钟然后重试请求。重试间隔和次数可以根据实际场景调整。

请注意，对服务器请求的频繁重试可能会导致服务器负载过重，因此在实施重试策略时应当谨慎，并考虑适当的退避策略（如上面例子中的指数退避）。此外，确保对网络不稳定或服务器确实需要时间恢复的情况有所区分。