使用 Axios 添加请求头
引言
Axios 是一个基于 Promise 的 HTTP 请求库，可以在浏览器和 Node.js 中使用。它提供了一种简洁、直观的方式来发送 HTTP 请求，并处理响应数据。
在实际开发中，我们经常需要在请求头中添加一些自定义的信息，例如身份验证标识、用户令牌等。本文将向你介绍如何使用 Axios 添加请求头，以及一些常见场景下的示例代码。
操作流程
下面是使用 Axios 添加请求头的整个流程的步骤表格：
| 步骤 | 描述 |
|---|---|
| 步骤1 | 创建 Axios 实例 |
| 步骤2 | 设置请求头 |
| 步骤3 | 发送请求 |
| 步骤4 | 处理响应 |
接下来，我们将逐步详细说明每一步需要做什么，并提供相应的代码示例。
步骤1：创建 Axios 实例
在使用 Axios 发送请求之前，我们需要先创建一个 Axios 实例。这个实例可以根据具体需求进行配置，例如设置默认的请求头、超时时间等。
下面是创建 Axios 实例的代码示例：
import axios from 'axios';
const instance = axios.create({
baseURL: '
timeout: 5000,
});
代码解释：
- 首先，我们导入 Axios 库。
- 然后，使用
axios.create方法创建一个 Axios 实例。 - 在
create方法的参数中，我们可以指定一些默认配置，例如baseURL表示请求的基础 URL，timeout表示请求的超时时间。
步骤2：设置请求头
在发送请求之前，我们可以通过修改 Axios 实例的默认配置来设置请求头。
下面是设置请求头的代码示例：
const headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer token123',
};
instance.defaults.headers.common = headers;
代码解释：
- 首先，我们定义了一个包含多个请求头信息的对象
headers。 - 然后，通过修改
instance.defaults.headers.common属性来设置请求头。common表示这些请求头适用于所有请求，你也可以通过修改instance.defaults.headers.get、instance.defaults.headers.post等属性来分别设置不同类型请求的请求头。
步骤3：发送请求
设置好请求头后，我们就可以使用 Axios 发送请求了。
下面是发送 GET 请求的代码示例：
instance.get('/api/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
代码解释：
- 首先，我们调用
instance.get方法发送一个 GET 请求。请求的 URL 是相对于baseURL的，这里是/api/users。 - 然后，使用 Promise 的
then方法处理响应成功的情况。response.data包含了服务器返回的数据。 - 最后，使用
catch方法处理请求失败的情况。error包含了错误信息。
步骤4：处理响应
在获取到服务器的响应后，我们可能需要对响应进行一些处理，例如判断状态码、解析数据等。
下面是处理响应的代码示例：
instance.get('/api/users')
.then(response => {
if (response.status === 200) {
console.log(response.data);
} else {
console.error('Request failed with status code ' + response.status);
}
})
.catch(error => {
console.error(error);
});
代码解释：
- 首先，我们使用
response.status来判断响应的状态码。在这个示例中，我们判断状态码是否为 200。 - 然后，根据状态码的不同，我们可以执行不同的逻辑。这里是打印响应数据或打印错误信息。
状态图
下面是使用 Mermaid 语法绘制的状态图，表示使用 Axios 添加请求头的整个过程：
stateDiagram
[*] --> 创建 Axios 实例
创建 Axios 实例 --> 设置请求头
设置请求头 --> 发送请求
发送请求 --> 处理响应
