菜鸟教程
教程 axios tutorial

拦截器中的错误与重试机制

在前端请求中，网络波动或服务器异常可能导致请求失败。通过 Axios 拦截器可以统一处理错误，并实现自动重试机制。

1. 基础错误处理

javascript 
import axios from "axios";

const instance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
});

instance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response) {
      console.error(`请求失败，状态码：${error.response.status}`);
    } else if (error.request) {
      console.error("无响应，请检查网络或请求超时");
    } else {
      console.error("请求配置错误：", error.message);
    }
    return Promise.reject(error);
  }
);

2. 简单重试机制

javascript 
const maxRetries = 3;

instance.interceptors.response.use(
  (response) => response,
  async (error) => {
    const config = error.config;
    if (!config || !config.retryCount) {
      config.retryCount = 0;
    }

    if (config.retryCount < maxRetries) {
      config.retryCount += 1;
      console.warn(`请求失败，正在重试第 ${config.retryCount} 次...`);
      return instance(config); // 重试请求
    }

    return Promise.reject(error);
  }
);

3. 高级重试策略

  • 延迟重试：使用 setTimeout 或 Promise 延迟重试，避免瞬时请求压力；
  • 指数退避：根据重试次数增加延迟间隔，减少服务器压力；
  • 条件重试：只对网络错误或特定状态码进行重试。
javascript 
instance.interceptors.response.use(
  (response) => response,
  async (error) => {
    const config = error.config;
    config.retryCount = config.retryCount || 0;
    const shouldRetry = !error.response || error.response.status >= 500;

    if (shouldRetry && config.retryCount < maxRetries) {
      config.retryCount += 1;
      const delay = 1000 * Math.pow(2, config.retryCount); // 指数退避
      await new Promise((resolve) => setTimeout(resolve, delay));
      return instance(config);
    }

    return Promise.reject(error);
  }
);

💡 小提示：通过拦截器实现统一错误处理和请求重试，可以提高前端请求稳定性，尤其适合对可靠性要求高的接口调用场景。

相关内容