前端容错与兜底策略

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

一、为什么需要容错策略

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

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

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 拦截器统一处理请求错误：

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

四、备用接口与降级策略

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

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

五、默认数据与界面兜底

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

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

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

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

六、重试与限流结合容错

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

七、日志上报与监控

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

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

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

八、小结

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

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

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