axios如何获取响应的error信息

admin

2024-12-07 4 0条评论

在使用Axios进行HTTP请求时，难免会遇到错误情况，比如网络问题、服务器错误（如404、500状态码）等。为了妥善处理这些错误并获取详细的错误信息，Axios提供了响应拦截器和错误回调机制。下面是如何捕获和解析Axios响应中的错误信息的专业指南。

基础错误处理

在发起请求时，使用.catch方法可以捕获到请求或响应阶段发生的错误。例如：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    // 错误处理逻辑放在这里
    console.error("请求失败:", error);
  });

错误对象结构

当错误被捕获时，error对象可能包含几个关键属性，特别是当请求实际上已发送且服务器返回了非2xx状态码时：

error.response: 这是最关键的部分，包含了服务器的响应详情，如状态码（status）、响应头（headers）和响应体（data）。
error.request: 表示原始的XMLHttpRequest对象，如果请求未发出，则可能为undefined。
error.message: 一个简短的错误消息字符串，如"Network Error"，在请求无法发出时尤其有用。
error.config: 发生错误的原始请求配置对象。

获取错误状态码和消息

如果服务器返回了错误状态码（如404或500），你应该访问error.response.status来获取状态码，以及error.response.data来获取服务器可能返回的错误信息。请注意，服务器错误信息的具体格式取决于API的设计，可能是JSON对象、字符串或其他格式。

axios.get('https://api.example.com/data')
  .catch(error => {
    if (error.response) {
      console.log("错误状态码:", error.response.status);
      console.log("错误信息:", error.response.data.message || error.response.data);
    } else if (error.request) {
      console.log("请求已发送，但未收到响应");
    } else {
      console.log("请求配置错误:", error.message);
    }
  });

响应拦截器中的错误处理

对于更复杂的错误处理逻辑，比如统一处理错误响应、记录日志或向用户展示友好的错误提示，可以使用响应拦截器（response interceptor）：

axios.interceptors.response.use(undefined, error => {
  if (error.response) {
    // 根据错误状态码进行不同的处理
    switch (error.response.status) {
      case 401:
        // 处理未授权
        break;
      case 403:
        // 处理禁止访问
        break;
      case 404:
        // 处理资源未找到
        break;
      default:
        // 其他错误处理
    }
    // 可以在此处统一设置错误提示信息或执行其他逻辑
    console.error("响应拦截器错误处理:", error.response.data);
  } else {
    console.error("请求未发送或未收到响应的错误:", error);
  }
  return Promise.reject(error); // 返回错误信息，以便链式调用中的下一个catch能继续处理
});