如何在 Axios 中获取请求拦截中的 Header
在现代 JavaScript 应用程序中，使用 Axios 进行 HTTP 请求是一种常见的做法。为了实现一些复杂的请求逻辑，比如在请求中添加动态 Header，通常会使用请求拦截器。本文将教你从请求拦截器中获取 Header，分步指导你完成这个流程。
整体流程
为了帮助你更好地理解整个流程，下面是一个简化的表格，展示了从请求拦截器到拿到 Header 的步骤。
| 步骤 | 说明 |
|---|---|
| 1 | 安装 Axios |
| 2 | 创建 Axios 实例 |
| 3 | 添加请求拦截器 |
| 4 | 发送请求并获取响应 |
| 5 | 访问和使用从请求拦截器中获取的 Header |
每一步的具体实现
1. 安装 Axios
在开始之前，确保你已经安装了 Axios 库。如果你在使用 npm，可以运行以下命令：
npm install axios
2. 创建 Axios 实例
接下来，我们将创建一个 Axios 实例，这样我们可以集中配置。代码如下：
import axios from 'axios';
// 创建一个 Axios 实例
const axiosInstance = axios.create({
baseURL: ' // 基础 URL
timeout: 10000, // 请求超时设置为 10 秒
});
3. 添加请求拦截器
我们将在这个步骤中添加请求拦截器，以便在每次请求时都可以访问并修改 Header。代码如下：
axiosInstance.interceptors.request.use(
(config) => {
// 在请求发送前添加自定义头
const token = 'your_token'; // 这个 token 通常来自于认证信息
config.headers['Authorization'] = `Bearer ${token}`; // 添加 Authorization 头
console.log('请求头:', config.headers); // 打印请求头
return config; // 一定要返回 config 对象
},
(error) => {
return Promise.reject(error); // 如果请求错误，返回错误
}
);
代码解释：
- 使用
interceptors.request.use方法来添加请求拦截器。 - 在回调函数中，可以访问请求的配置对象
config，在其中添加或修改 Header。 - 切记要返回
config，否则请求将无法继续。
4. 发送请求并获取响应
我们可以通过调用 Axios 实例的 get、post 等方法来发送请求。代码如下：
axiosInstance.get('/endpoint') // 用真实的 API 端点替换 '/endpoint'
.then(response => {
console.log('响应数据:', response.data); // 打印响应数据
})
.catch(error => {
console.error('请求错误:', error); // 处理请求错误
});
5. 访问和使用从请求拦截器中获取的 Header
在我们的示例中，Header 被添加到请求中。如果你想获取这些 Header（比如在响应中），可以在响应拦截器中处理。代码如下：
axiosInstance.interceptors.response.use(
(response) => {
console.log('响应头:', response.headers); // 打印响应头
return response; // 返回响应对象
},
(error) => {
return Promise.reject(error); // 返回错误
}
);
类图与序列图
在这里，我将通过 mermaid 语法展示类图和序列图，以帮助你理解各个组件之间的关系。
类图
classDiagram
class AxiosInstance {
+create(config)
+get(url)
+post(url, data)
+interceptors
}
class RequestInterceptor {
+use(onFulfilled, onRejected)
}
class ResponseInterceptor {
+use(onFulfilled, onRejected)
}
AxiosInstance "1" -- "1" RequestInterceptor : has
AxiosInstance "1" -- "1" ResponseInterceptor : has
序列图
sequenceDiagram
participant C as Client
participant AI as AxiosInstance
participant RI as RequestInterceptor
participant R as Server
participant RI2 as ResponseInterceptor
C->>AI: 发起请求
AI->>RI: 处理请求拦截
RI-->>AI: 返回请求配置
AI->>R: 发送请求
R-->>AI: 返回响应
AI->>RI2: 处理响应拦截
RI2-->>AI: 返回响应数据
AI-->>C: 返回最终数据
结尾
通过以上步骤，无论你是初学者还是有经验的开发者，都可以快速掌握如何在 Axios 中获取请求拦截中的 Header。使用拦截器，你能够在请求和响应中添加自定义逻辑，这对于复杂的应用程序非常重要。希望本文能够帮助你加深对 Axios 和请求拦截器的理解。如果有任何问题，欢迎随时交流！
