Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 环境中。封装 axios 可以让我们更轻松地管理 HTTP 请求、错误处理及提高代码的可复用性。以下是一份详细的 axios 封装教程。
## 1. 安装与引入
首先，使用 npm 或 yarn 安装 axios：
```bash
npm install axios --save
# 或者
yarn add axios
```
在项目中引入 axios 模块：
```javascript
import axios from 'axios';
```
## 2. 创建 axios 实例
创建一个 axios 实例，可以对其进行自定义配置：
```javascript
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
headers: {
'Content-Type': 'application/json'
}
});
```
## 3. 请求和响应拦截器
拦截器允许在请求发出之前或响应返回之前对数据进行一定的处理。例如，可以在请求拦截器中添加统一的身份验证信息，或者在响应拦截器中统一处理错误。
### 3.1. 请求拦截器
```javascript
instance.interceptors.request.use(
(config) => {
// 在此处添加身份验证信息，例如 token
config.headers.Authorization = `Bearer ${localStorage.getItem('access_token')}`;
// 返回经过处理的 config 对象
return config;
},
(error) => {
// 请求发生错误时的处理
console.log(`Request error: ${error}`);
return Promise.reject(error);
}
);
```
### 3.2. 响应拦截器
```javascript
instance.interceptors.response.use(
(response) => {
// 对响应结果进行处理，例如清除无用的数据包装
return response.data;
},
(error) => {
// 对响应发生错误时的处理
console.log(`Response error: ${error}`);
return Promise.reject(error);
}
);
```
## 4. 封装请求方法
为了使代码更实用，我们可以将常用的请求方法（例如 GET、POST、PUT、DELETE 等）封装成一个 api 模块。
```javascript
const api = {
get(url, params) {
return instance.get(url, { params });
},
post(url, data) {
return instance.post(url, data);
},
put(url, data) {
return instance.put(url, data);
},
delete(url, params) {
return instance.delete(url, { params });
}
};
```
这样，我们可以在其他文件中简单地使用以下方式调用已封装的 API：
```javascript
// 引入 api 模块
import api from './path/to/your/api';
// 调用封装好的 get 请求方法
api.get('/users', { page: 1, limit: 10 });
// 调用封装好的 post 请求方法
api.post('/users', { name: 'John', age: 30 });
```
通过对 axios 的封装，我们可以轻松地管理请求，统一处理错误，提高代码的可维护性和可读性。这份教程为您提供了 axios 封装的基本思路，您可以根据自己的项目需求进行适当调整。
