跳到主要内容

Axios拦截器

在现代Web开发中，与API进行交互是一个常见的任务。Axios是一个流行的JavaScript库，用于发送HTTP请求。它提供了强大的功能，其中之一就是拦截器。拦截器允许你在请求发送到服务器之前或响应返回到客户端之前，对它们进行拦截和处理。本文将详细介绍如何在Vue.js中使用Axios拦截器。

什么是Axios拦截器？​

Axios拦截器是Axios库提供的一种机制，允许你在请求发送到服务器之前或响应返回到客户端之前，对它们进行拦截和处理。拦截器可以用于多种场景，例如：

  • 在请求发送前添加认证令牌。
  • 在响应返回前处理错误。
  • 记录请求和响应的日志。

拦截器分为两种类型：

  1. 请求拦截器：在请求发送到服务器之前执行。
  2. 响应拦截器：在响应返回到客户端之前执行。

如何使用Axios拦截器​

1. 安装Axios​

首先，确保你已经安装了Axios。如果还没有安装，可以使用以下命令进行安装：

bash
npm install axios

2. 创建Axios实例​

在Vue.js项目中，通常会创建一个Axios实例，以便全局配置和拦截器的使用。

javascript
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
  },
});

3. 添加请求拦截器​

请求拦截器允许你在请求发送到服务器之前对其进行修改。例如，你可以在每个请求中添加认证令牌。

javascript
apiClient.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

在这个例子中，我们检查本地存储中是否存在认证令牌。如果存在，我们将其添加到请求头中。

4. 添加响应拦截器​

响应拦截器允许你在响应返回到客户端之前对其进行处理。例如，你可以处理全局的错误响应。

javascript
apiClient.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      // 处理未授权错误
      console.error('Unauthorized, logging out...');
      localStorage.removeItem('authToken');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

在这个例子中，我们检查响应状态码是否为401（未授权）。如果是，我们移除本地存储中的认证令牌并重定向到登录页面。

实际应用场景​

1. 全局错误处理​

在实际开发中，你可能会遇到各种HTTP错误，例如404（未找到）或500（服务器内部错误）。通过响应拦截器，你可以统一处理这些错误，而不需要在每个请求中单独处理。

javascript
apiClient.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response) {
      switch (error.response.status) {
        case 404:
          console.error('Resource not found');
          break;
        case 500:
          console.error('Server error');
          break;
        default:
          console.error('An error occurred');
      }
    }
    return Promise.reject(error);
  }
);

2. 请求日志记录​

你可以使用请求拦截器来记录每个请求的详细信息，以便在调试时使用。

javascript
apiClient.interceptors.request.use(
  (config) => {
    console.log('Request sent:', config);
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

总结​

Axios拦截器是一个强大的工具，可以帮助你在Vue.js应用中更好地管理和控制API请求与响应。通过请求拦截器，你可以在请求发送前对其进行修改；通过响应拦截器，你可以在响应返回前对其进行处理。这些功能使得Axios拦截器在实际开发中非常有用。

附加资源与练习​

  • 练习：尝试在你的Vue.js项目中实现一个请求拦截器，用于在每个请求中添加一个自定义的请求头。
  • 资源：阅读Axios官方文档，了解更多关于拦截器的高级用法：Axios官方文档
提示

提示：在实际项目中，建议将Axios实例和拦截器的配置放在一个单独的文件中，以便于管理和维护。