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

URL: https://caijiao.org/axios/interceptors/retry
Source: docs/axios/interceptors/retry.md
Description: 本章节讲解如何在 Axios 拦截器中统一处理请求错误，并实现自动重试机制，包括网络错误、超时或服务器异常的重试策略，提高前端请求的可靠性与稳定性。

在前端请求中，网络波动或服务器异常可能导致请求失败。通过 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);
  }
);
```

---

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