Axios错误处理

在使用 Axios 发起 HTTP 请求时，错误处理是一个非常重要的环节。Axios 提供了一套机制来捕获和处理请求过程中可能出现的各种错误。本文将详细介绍如何有效地处理 Axios 请求中的错误。

基本错误处理

Axios 请求返回一个 Promise，因此你可以使用 .then() 和 .catch() 方法来处理成功和失败的响应。在 .catch() 方法中，你可以捕获并处理请求过程中发生的错误。

axios.get('/some-endpoint')
  .then(response => {
    // 处理成功的响应
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

错误对象分析

当请求失败时，.catch() 方法接收到的 error 对象包含了一些有用的信息，这些信息可以帮助你确定错误的类型并采取相应的处理措施。

• error.response：如果服务器返回了一个状态码，并且这个状态码触发了错误处理（通常是状态码不在 2xx 范围内），error.response 将包含服务器的响应数据。
• error.request：这是触发错误的请求对象（如果请求已经发出）。
• error.message：错误的消息描述。
• error.config：这是请求的配置对象。

区分不同类型的错误

根据 error.response 的状态码，你可以区分不同类型的错误，并采取相应的处理措施。

axios.get('/some-endpoint')
  .then(response => {
    // 处理成功的响应
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了一个状态码，且状态码触发了错误处理
      switch (error.response.status) {
        case 400:
          // 坏请求（例如，请求参数不正确）
          console.error('Bad Request:', error.response.data);
          break;
        case 401:
          // 未授权（例如，没有提供有效的身份验证令牌）
          console.error('Unauthorized:', error.response.data);
          // 可以跳转到登录页面或显示登录提示
          break;
        case 403:
          // 禁止访问（例如，用户没有权限访问该资源）
          console.error('Forbidden:', error.response.data);
          break;
        case 404:
          // 未找到资源
          console.error('Not Found:', error.response.data);
          break;
        case 500:
          // 服务器内部错误
          console.error('Internal Server Error:', error.response.data);
          break;
        // 其他状态码处理...
        default:
          console.error('Error:', error.response.data);
      }
    } else if (error.request) {
      // 请求已经发出，但没有收到响应
      console.error('No response received:', error.request);
    } else {
      // 其他错误（如请求配置错误或网络问题）
      console.error('Error in setting up request:', error.message);
    }
  });

使用 try...catch 进行异步错误处理

如果你在使用 async/await 语法来发起 Axios 请求，你可以使用 try...catch 语句来捕获和处理错误。

async function fetchData() {
  try {
    const response = await axios.get('/some-endpoint');
    // 处理成功的响应
    console.log(response.data);
  } catch (error) {
    // 处理错误
    if (error.response) {
      // 服务器返回了一个状态码，并触发了错误处理
      console.error('Server responded with a status code:', error.response.status);
      console.error('Response data:', error.response.data);
    } else if (error.request) {
      // 请求已经发出，但没有收到响应
      console.error('No response received for request:', error.request);
    } else {
      // 其他错误（如请求配置错误或网络问题）
      console.error('Error in setting up request:', error.message);
    }
  }
}

// 调用函数
fetchData();

全局错误处理

如果你希望在全局范围内捕获所有 Axios 请求的错误，你可以为 Axios 实例添加一个全局的错误处理程序。这通常通过拦截器来实现，但请注意，拦截器主要用于请求和响应的预处理，而不是专门的错误处理。不过，你可以在响应拦截器中捕获并处理错误，然后统一处理它们。

// 添加响应拦截器以全局处理错误
axios.interceptors.response.use(
  response => {
    // 对响应数据做点什么（如果有必要）
    return response;
  },
  error => {
    // 在这里全局处理错误
    // 你可以记录错误日志、显示错误通知等
    console.error('Global Error Handler:', error);
    
    // 根据需要返回 Promise.reject(error) 或其他处理结果
    return Promise.reject(error);
  }
);

请注意，即使添加了全局错误处理程序，你仍然可以在每个请求中使用 .catch() 或 try...catch 来捕获和处理特定请求的错误。全局错误处理程序通常用于处理那些需要在多个请求之间共享的错误处理逻辑。

本文地址：https://www.tides.cn/p_js-axios-error