Axios请求重试的实现技巧

前端

2023-09-25 23:52:57

使用Axios 实现请求重试：拦截器 vs 适配器

在与服务器交互时，网络故障或服务器问题在所难免。为了确保应用程序的健壮性和可靠性，实施请求重试机制至关重要。Axios提供了两种实现此功能的方案：拦截器和适配器。本文将深入探讨这两种方法的实施细节、优缺点以及最佳应用场景。

基于拦截器的请求重试

拦截器提供了一种强大的方式，让我们可以在请求发送前后执行自定义操作。我们可以利用拦截器轻松实现请求重试功能。

步骤：

注册请求拦截器： 在请求发送前执行。
在拦截器中实现重试逻辑： 检查请求配置，并在需要时修改配置。
在拦截器中捕获错误并重试： 如果请求失败，检查重试次数并重新发送请求。

代码示例：

axios.interceptors.request.use((config) => {
  if (config.retry === undefined) {
    config.retry = 3;
  }
  return config;
});

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.config && error.config.retry > 0) {
      error.config.retry--;
      return axios(error.config);
    }
    return Promise.reject(error);
  }
);

基于适配器的请求重试

适配器允许我们自定义请求的发送方式。通过创建自定义适配器，我们可以实现请求重试功能。

步骤：

创建自定义适配器： 接收请求配置并返回一个Promise。
将自定义适配器注册到Axios： 指定为默认适配器。
在自定义适配器中实现重试逻辑： 发送请求并处理重试。

代码示例：

const customAdapter = (config) => {
  return new Promise((resolve, reject) => {
    if (config.retry === undefined) {
      config.retry = 3;
    }
    fetch(config.url, config)
      .then((response) => {
        if (response.ok) {
          resolve(response);
        } else {
          if (config.retry > 0) {
            config.retry--;
            return customAdapter(config);
          } else {
            reject(new Error(`请求失败：${response.status} ${response.statusText}`));
          }
        }
      })
      .catch((error) => {
        if (config.retry > 0) {
          config.retry--;
          return customAdapter(config);
        } else {
          reject(error);
        }
      });
  });
};

axios.defaults.adapter = customAdapter;