axios怎么封装exe

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 请求管理，让您的项目更加简洁和易于维护。