Axios 响应拦截器。

原创于 2025-10-12 23:29:08 发布 · 331 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

Axios 响应拦截器的核心作用

Axios 响应拦截器是一种全局钩子机制，允许在 HTTP 响应到达业务逻辑前对其进行统一处理。典型应用场景包括状态码过滤、数据格式标准化、错误统一封装等。通过拦截器，开发者能减少重复代码，提升应用的可维护性。

响应拦截器的基本实现

以下代码展示如何注册一个基础响应拦截器：

axios.interceptors.response.use(
  (response) => {
    // 对成功响应进行处理
    return response.data;
  },
  (error) => {
    // 对错误响应进行处理
    return Promise.reject(error);
  }
);

该拦截器将响应数据从 response 对象中解构，直接返回 data 字段。错误处理函数会将异常继续抛出，供后续逻辑捕获。

数据格式标准化实践

在实际项目中，后端返回数据通常需要统一格式化。以下示例强制要求所有响应必须包含 code 和 data 字段：

axios.interceptors.response.use(
  (response) => {
    const { code, data } = response.data;
    if (code !== 200) {
      return Promise.reject(new Error('Invalid status code'));
    }
    return data;
  },
  (error) => {
    const defaultMessage = 'Network Error';
    const errMsg = error.response?.data?.message || defaultMessage;
    return Promise.reject(new Error(errMsg));
  }
);

错误处理的高级技巧

针对不同 HTTP 状态码进行定制化处理：

const errorHandler = (error) => {
  const status = error.response?.status;
  switch (status) {
    case 401:
      router.push('/login');
      break;
    case 403:
      showToast('Permission denied');
      break;
    case 500:
      logErrorToServer(error);

### Axios 响应拦截器的核心作用

Axios 响应拦截器是一种全局钩子机制，允许在 HTTP 响应到达业务逻辑前对其进行统一处理。典型应用场景包括状态码过滤、数据格式标准化、错误统一封装等。通过拦截器，开发者能减少重复代码，提升应用的可维护性。

### 响应拦截器的基本实现

以下代码展示如何注册一个基础响应拦截器：
```javascript
axios.interceptors.response.use(
  (response) => {
    // 对成功响应进行处理
    return response.data;
  },
  (error) => {
    // 对错误响应进行处理
    return Promise.reject(error);
  }
);