在 Axios 请求头中添加信息
引言
Axios 是一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求。在实际开发中，我们经常需要向请求头中添加一些信息，例如用户的身份信息、token 等。本文将介绍如何在 Axios 请求头中添加信息。
整体流程
下面是在 Axios 请求头中添加信息的整体流程：
| 步骤 | 描述 |
|---|---|
| 1 | 创建 Axios 实例 |
| 2 | 设置请求拦截器 |
| 3 | 在拦截器中添加信息到请求头 |
| 4 | 发送请求 |
接下来，我们将逐步讲解每个步骤需要做什么，以及相应的代码示例。
步骤一：创建 Axios 实例
首先，我们需要创建一个 Axios 实例，用于发送 HTTP 请求。在创建实例时，我们可以设置一些默认配置，例如请求的基础URL、超时时间等。
// 导入 axios 模块
import axios from 'axios';
// 创建 Axios 实例
const instance = axios.create({
baseURL: ' // 设置请求的基础URL
timeout: 5000 // 设置请求超时时间为5秒
});
步骤二：设置请求拦截器
接下来，我们需要设置请求拦截器，用于在发送请求之前进行一些操作。其中，我们就可以在拦截器中添加信息到请求头。
// 设置请求拦截器
instance.interceptors.request.use(
config => {
// 在这里添加信息到请求头
config.headers['Authorization'] = 'Bearer your_token';
return config;
},
error => {
return Promise.reject(error);
}
);
在上述代码中，我们使用 instance.interceptors.request.use() 方法来设置请求拦截器。其中，config.headers['Authorization'] 表示请求头中的 Authorization 字段，我们可以将用户的身份信息或 token 赋值给它。
步骤三：发送请求
现在，我们已经设置好了请求拦截器，可以向请求头中添加信息。接下来，我们就可以发送请求了。
// 发送 GET 请求
instance.get('/api/user')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
在上述代码中，我们使用 instance.get() 方法发送 GET 请求，并传入请求的 URL。在请求完成后，可以通过 response.data 获取到响应的数据。
类图
下面是本文介绍的相关类的类图:
classDiagram
class Axios {
<<interface>>
+get(url: string): Promise<any>
+post(url: string, data: any): Promise<any>
+put(url: string, data: any): Promise<any>
+delete(url: string): Promise<any>
}
class AxiosInstance {
+create(config?: AxiosRequestConfig): Axios
}
class AxiosInterceptorManager {
+use(resolved: ResolvedFn<T>, rejected: RejectedFn): number
+eject(id: number): void
}
class AxiosRequestConfig {
-url: string
-method: Method
-headers: any
-timeout: number
-baseURL: string
-transformRequest: AxiosTransformer | AxiosTransformer[]
-transformResponse: AxiosTransformer | AxiosTransformer[]
-params: any
-paramsSerializer: (params: any) => string
-data: any
-cancelToken: CancelToken
}
class AxiosResponse {
-data: any
-status: number
-statusText: string
-headers: any
-config: AxiosRequestConfig
-request: any
}
class AxiosError {
-message: string
-config: AxiosRequestConfig
-code?: string
-request?: any
-response?: AxiosResponse
-isAxiosError: boolean
}
class CancelToken {
<<interface>>
+source(): CancelTokenSource
}
class CancelTokenSource {
-token: CancelToken
-cancel: Canceler
}
interface AxiosTransformer {
(data: any, headers?: any): any
}
interface Canceler {
(message?: string): void
}
interface ResolvedFn<T = any> {
(val: T): T | Promise<T>
}
interface RejectedFn {
(error: any): any
}
Axios <|-- AxiosInstance
