# 前端容错与兜底策略

URL: https://caijiao.org/axios/best-practices/fallback
Source: docs/axios/best-practices/fallback.md
Description: 本章节讲解如何在前端使用 Axios 实现容错与兜底策略，包括请求失败处理、默认数据返回、全局错误提示、降级方案、备用接口调用等方法，确保应用在网络异常或接口异常情况下依然能稳定运行，提高用户体验和应用可靠性。

在实际项目中，接口可能会出现延迟、错误或不可用情况。
前端容错与兜底策略能保证应用在异常情况下仍然稳定运行，提升用户体验。

## 一、为什么需要容错策略

* 避免页面因单个接口失败而崩溃。
* 提供可用的默认数据或降级方案。
* 保证关键功能尽可能可用，提升用户体验。
* 收集错误信息以便监控和优化。

## 二、使用 try/catch 捕获请求异常

```js
async function fetchData() {
  try {
    const response = await axios.get('/api/user');
    return response.data;
  } catch (error) {
    console.error('请求失败：', error.message);
    return { name: '默认用户', id: 0 }; // 兜底数据
  }
}
```

## 三、全局错误处理与提示

通过 Axios 拦截器统一处理请求错误：

```js
axios.interceptors.response.use(
  response => response,
  error => {
    console.error('全局请求错误:', error.message);
    alert('网络异常，请稍后重试！');
    return Promise.reject(error);
  }
);
```

## 四、备用接口与降级策略

当主接口不可用时，调用备用接口或返回静态数据：

```js
async function fetchWithFallback() {
  try {
    return (await axios.get('/api/main')).data;
  } catch {
    console.warn('主接口失败，使用备用接口');
    return (await axios.get('/api/backup')).data;
  }
}
```

## 五、默认数据与界面兜底

* 对组件或页面提供默认状态：

```js
const userData = ref({ name: '游客', id: null });

async function loadUser() {
  userData.value = await fetchData();
}
```

* 避免因接口未返回数据导致界面报错。

## 六、重试与限流结合容错

* 对幂等请求启用自动重试。
* 对短时间大量请求进行限流，防止接口压力过大。

## 七、日志上报与监控

* 在失败或兜底情况下记录日志：

```js
axios.interceptors.response.use(null, error => {
  sendLogToServer({
    url: error.config.url,
    status: error.response?.status,
    message: error.message
  });
  return Promise.reject(error);
});
```

* 便于后续分析和改进系统可靠性。

## 八、小结

前端容错与兜底策略是保障应用稳定性的重要手段：

* 捕获异常并提供默认数据。
* 使用全局拦截器统一处理错误。
* 备用接口与降级策略确保核心功能可用。
* 结合日志与监控优化后续体验。

通过科学设计的容错与兜底策略，即使接口异常或网络不稳定，应用依然可以平稳运行。