全面解析 Axios 拦截器：掌控 HTTP 请求与响应

2024-01-26 10:02:00







## Axios 拦截器：HTTP 请求与响应的掌控者

在现代前端开发中，管理异步 HTTP 请求已成为一项关键任务。Axios 库凭借其简洁易用的 API，简化了这一过程。而 Axios 拦截器更是锦上添花，赋予开发者对 HTTP 请求和响应的精细控制权。

### 拦截器的本质

拦截器本质上是一种函数，它可以拦截和转换 HTTP 请求或响应。Axios 提供了两种类型的拦截器：请求拦截器和响应拦截器。请求拦截器在请求被发送到服务器之前执行，而响应拦截器则在服务器返回响应后执行。

### 拦截器的实现

Axios 拦截器的实现非常简洁。它使用一个名为 `handlers` 的数组来存储拦截器函数。当调用 `use` 方法添加一个拦截器时，它会将函数推送到 `handlers` 数组中。

每个拦截器函数都接收一个参数，该参数代表要拦截的请求或响应对象。拦截器函数可以修改该对象，然后将其返回。如果拦截器函数返回一个 Promise，Axios 将等待 Promise 解析后再继续执行。

### 拦截器的类型

Axios 支持两种类型的拦截器：

- **请求拦截器：** 在请求发送到服务器之前执行。可用于修改请求配置、添加自定义头或拦截请求。
- **响应拦截器：** 在服务器返回响应后执行。可用于处理响应数据、修改响应状态或拦截响应。

### 拦截器的应用场景

Axios 拦截器在各种场景中都非常有用：

- **添加自定义头：** 在每个请求中添加 Authorization 头或其他自定义头。
- **修改请求数据：** 在发送到服务器之前对请求数据进行转换或验证。
- **拦截请求：** 根据某些条件（例如网络连接状态）拦截和取消请求。
- **处理响应错误：** 全局处理 HTTP 错误，提供统一的错误处理机制。
- **转换响应数据：** 在应用程序使用之前转换或格式化响应数据。

### 实例应用

以下代码演示了如何使用 Axios 拦截器添加自定义头：

```javascript
axios.interceptors.request.use((config) => {
  config.headers['X-My-Custom-Header'] = 'custom-value';
  return config;
});