Axios 是一个基于 Promise 的 HTTP 客户端库，可以在浏览器和 Node.js 中使用。封装 Axios 可以使项目中的 API 请求更加统一和易于管理。在这里，我们将详细介绍如何封装 Axios 实现可扩展的 API 请求管理。
1. 安装 Axios：
首先，我们需要在项目中安装 Axios。如果您使用的是 npm，请输入以下命令来安装 Axios：
```
npm install axios
```
如果您使用的是 yarn，输入以下命令来安装 Axios：
```
yarn add axios
```
2. 创建 Axios 实例：
创建一个名为 `request.js` 的文件，用来存放我们的 Axios 实例及相关配置。以下是 `request.js` 文件的内容：
```javascript
import axios from 'axios';
// 创建 Axios 实例
const instance = axios.create({
baseURL: 'https://api.example.com', // API 请求的基础 URL
timeout: 30000, // 超时设置为 30 秒
headers: {
'Content-Type': 'application/json',
},
});
export default instance;
```
3. 添加请求和响应拦截器：
我们需要添加请求和响应拦截器来统一处理 API 请求的错误和数据格式等。
```javascript
// 请求拦截器
instance.interceptors.request.use(
(config) => {
// 在此处可以添加请求前需要处理的逻辑，如添加 Token 等
// config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
return config;
},
(error) => {
// 请求错误时的处理
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
(response) => {
// 可以在这里对响应数据进行处理，如统一处理错误信息等
if (response.data.code !== 0) {
console.error(response.data.message);
}
return response.data;
},
(error) => {
// 响应错误时的处理
console.error(error);
return Promise.reject(error);
}
);
```
4. 封装 API 请求方法：
创建一个名为 `api.js` 的文件，用来存放我们的 API 请求方法。以下是 `api.js` 文件的内容：
```javascript
import request from './request';
// 获取用户信息
export const getUserInfo = (userId) => {
return request.get(`/users/${userId}`);
};
// 更新用户信息
export const updateUserInfo = (userId, data) => {
return request.put(`/users/${userId}`, data);
};
// 其他 API 请求方法...
```
5. 在项目中使用封装好的 API 请求方法：
在需要发起 API 请求的地方，直接导入封装好的方法即可。如下：
```javascript
import { getUserInfo, updateUserInfo } from './api';
// 获取用户信息
getUserInfo(1)
.then((data) => {
console.log('用户信息：', data);
})
.catch((error) => {
console.error('获取用户信息失败：', error);
});
// 更新用户信息
updateUserInfo(1, { nickname: 'Updated User' })
.then((data) => {
console.log('更新成功：', data);
})
.catch((error) => {
console.error('更新用户信息失败：', error);
});
```
通过以上步骤，您可以成功地封装 Axios 来实现可扩展的 API 请求管理，让您的项目更加简洁和易于维护。
