Vue2中如何获取axios拦截器catch中的错误参数？

Question

在Vue2项目中使用Axios时，如何正确获取拦截器catch中的错误参数是一个常见问题。当请求失败进入catch块时，错误信息通常封装在`error`对象中。可以通过`error.response`获取HTTP响应数据（如状态码和消息），或通过`error.message`获取简单错误描述。 实际开发中，有时会发现无法正确捕获错误内容。这是因为未处理特定场景，例如网络中断或跨域问题。此时`error.response`可能为undefined，需检查`error.request`或`error.message`。 解决方法：在Axios拦截器的catch部分统一处理错误，例如： ```javascript axios.interceptors.response.use( response => response, error => { if (error.response) { console.log(error.response.data); console.log(error.response.status); } else { console.log(error.message); } return Promise.reject(error); } ); ``` 此方式确保所有请求错误都能被合理解析与利用。

Answer 1

1. 常见问题：Axios拦截器中的错误捕获

在Vue2项目中，使用Axios时，请求失败进入catch块时，错误信息通常封装在`error`对象中。开发者可以通过`error.response`获取HTTP响应数据（如状态码和消息），或通过`error.message`获取简单错误描述。

然而，在实际开发中，可能会遇到无法正确捕获错误内容的情况。这通常是由于未处理特定场景，例如网络中断、跨域问题等。在这种情况下，`error.response`可能为undefined，需要检查`error.request`或`error.message`。

1.1 Axios错误对象结构

属性	描述
`error.response`	包含服务器返回的HTTP响应数据，包括状态码和消息。
`error.request`	客户端发出的请求信息，通常是一个XMLHttpRequest对象。
`error.message`	简单的错误描述，适用于网络中断或其他非HTTP错误。

2. 深入分析：为什么会出现错误捕获失败

当请求失败时，Axios会将错误封装为一个`error`对象。但并非所有错误都具有`response`属性：

• 如果服务器返回了HTTP响应，则`error.response`存在。
• 如果请求未到达服务器（如网络中断或DNS解析失败），则`error.response`为undefined，而`error.request`包含请求信息。
• 其他异常情况（如跨域限制）也可能导致`error.response`不存在。

因此，统一处理错误时，必须考虑这些特殊情况。

3. 解决方案：统一错误处理

为了确保所有请求错误都能被合理解析与利用，可以在Axios拦截器的catch部分进行统一处理。以下是示例代码：

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      console.log(error.response.data); // 输出响应体
      console.log(error.response.status); // 输出状态码
    } else if (error.request) {
      console.log('Request was made but no response received');
    } else {
      console.log(error.message); // 输出简单错误描述
    }
    return Promise.reject(error);
  }
);
  

3.1 流程图：错误处理逻辑

graph TD;
      A[请求失败] --> B{是否存在 error.response};
      B -- 是 --> C[输出响应体和状态码];
      B -- 否 --> D{是否存在 error.request};
      D -- 是 --> E[记录请求信息];
      D -- 否 --> F[输出简单错误描述];

4. 高级优化：结合全局错误提示

在大型项目中，可以结合Vue的全局事件总线或Vuex管理错误提示。例如，当检测到特定状态码时，触发全局通知组件：

import Vue from 'vue';

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      const statusCode = error.response.status;
      if (statusCode === 401) {
        Vue.prototype.$message.error('用户未授权，请重新登录');
      } else if (statusCode === 404) {
        Vue.prototype.$message.error('资源未找到');
      }
    } else {
      Vue.prototype.$message.error('网络异常，请稍后重试');
    }
    return Promise.reject(error);
  }
);
  

这种方式不仅提高了代码的可维护性，还增强了用户体验。