axios异常处理如何统一捕获与优雅处理？

在现代前端开发中，Axios 作为一款基于 Promise 的 HTTP 客户端，因其简洁易用和强大的功能而被广泛应用，在实际开发过程中，网络请求不可避免地会遇到各种异常情况，如网络错误、服务器错误、请求超时等，合理的异常处理机制不仅能提升用户体验，还能帮助开发者快速定位和解决问题，本文将围绕 Axios 的异常处理展开详细讨论，包括常见异常类型、全局配置、拦截器应用以及最佳实践等内容。

Axios 异常类型及成因

Axios 中的异常主要分为两大类：请求异常和响应异常，请求异常通常发生在请求发送之前或发送过程中,而响应异常则发生在服务器返回响应后。

1. 请求异常

   • 网络错误：如用户断网、DNS 解析失败等。
   • 请求配置错误：如错误的 URL、无效的请求头等。
   • 请求超时：请求在指定时间内未收到响应。

2. 响应异常

   • HTTP 状态码错误：如 404（未找到）、500（服务器内部错误）等。
   • 响应数据格式错误：如服务器返回非 JSON 格式数据但前端尝试解析为 JSON。
   • 跨域问题：由于 CORS 策略限制导致请求被拦截。

全局异常处理配置

Axios 提供了全局配置选项，可以统一处理请求和响应中的异常，通过 axios.defaults 或 axios.create() 创建的实例，可以设置 validateStatus 和 timeout 等参数。

axios.defaults.timeout = 5000; // 设置全局超时时间
axios.defaults.validateStatus = function (status) {
  return status >= 200 && status < 300; // 自定义状态码验证规则
};

还可以通过 catch 方法捕获请求或响应中的异常：

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了错误状态码
      console.error('Error status:', error.response.status);
    } else if (error.request) {
      // 请求已发送但无响应
      console.error('No response received:', error.request);
    } else {
      // 请求配置错误
      console.error('Request error:', error.message);
    }
  });

拦截器中的异常处理

拦截器是 Axios 的强大功能之一，可以在请求或响应被 then 或 catch 处理前拦截它们，通过响应拦截器，可以统一处理异常情况,避免在每个请求中重复编写错误处理逻辑。

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 未授权，跳转登录页
          window.location.href = '/login';
          break;
        case 404:
          console.error('Resource not found');
          break;
        case 500:
          console.error('Server error');
          break;
        default:
          console.error('Unknown error');
      }
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Request error:', error.message);
    }
    return Promise.reject(error); // 将错误继续传递
  }
);

常见异常场景及解决方案

以下表格总结了常见的异常场景及其处理方法：

最佳实践

1. 统一错误处理：通过拦截器集中处理异常，避免代码冗余。
2. 用户友好提示：根据错误类型向用户展示友好的提示信息，如网络错误时显示“请检查网络连接”。
3. 日志记录：将异常信息记录到日志系统，便于后续分析和排查。
4. 重试机制：对于临时性错误（如网络波动），可以实现自动重试逻辑。

相关问答 FAQs

Q1：如何区分网络错误和服务器错误？
A：通过 error.response 是否存在来判断。error.response 存在，则是服务器返回的错误（如 404、500）；error.response 不存在但 error.request 存在，则是网络错误（如请求超时或无响应）。

Q2：如何在拦截器中实现请求重试？
A：可以在拦截器中判断错误类型，若为可重试错误（如 5xx 状态码或网络错误），则使用 axios 重新发送请求,并设置最大重试次数。

const retryRequest = async (error, retryCount = 3) => {
  if (retryCount <= 0) return Promise.reject(error);
  if (error.response && error.response.status >= 500) {
    await new Promise(resolve => setTimeout(resolve, 1000)); // 延迟 1 秒
    return axios.request(error.config); // 重新发送请求
  }
  return Promise.reject(error);
};

通过以上方法，可以构建一个健壮的 Axios 异常处理体系,确保应用的稳定性和用户体验。