《二次封装axios好处》
一、解决方案
在现代前端开发中，直接使用axios库虽然可以满足基本的HTTP请求需求，但通过二次封装axios能够提供更简洁、高效、灵活的解决方案。它可以解决原始axios使用过程中的一些痛点，如统一配置管理、集中处理等。
二、便于统一配置管理
（一）问题
每次创建axios实例或者发送请求时，都需要重复设置一些相同的配置项，例如基础URL、超时时间等。
（二）代码实现
javascript
// 创建一个封装后的axios实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 基础URL
timeout: 5000, // 设置超时时间
headers: {
'Content-Type': 'application/json' // 默认请求头
}
});
这样，在项目中使用这个封装后的instance发送请求时，就无需再单独设置这些公共配置了。
三、集中处理
（一）问题
在实际项目中，我们可能需要对请求和响应进行预处理，比如在请求前添加token验证，在响应后对错误状态码进行统一处理。如果不进行二次封装，这些操作会分散在各个请求处，不利于维护。
（二）思路1：简单拦截处理
``javascriptBearer ${token}`;
// 请求
instance.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization =
}
return config;
}, error => {
return Promise.reject(error);
});
// 响应
instance.interceptors.response.use(response => {
return response.data; // 只返回数据部分
}, error => {
if (error.response.status === 401) {
// 处理未授权情况
console.log('未授权');
}
return Promise.reject(error);
});
```
（三）思路2：基于不同业务场景的拦截处理
如果项目中有多个不同的业务模块，每个模块对于请求和响应的处理逻辑有所不同。可以在二次封装时，根据模块标识来进行不同的拦截处理逻辑。例如：
```javascript
function createAxiosInstance(moduleName) {
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
headers: {'Content-Type': 'application/json'}
});
if (moduleName === 'user') {
instance.interceptors.request.use(config => {
// 用户模块特定的请求拦截处理
return config;
});
instance.interceptors.response.use(response => {
// 用户模块特定的响应拦截处理
return response.data;
}, error => {
// 用户模块特定的错误处理
return Promise.reject(error);
});
} else if (moduleName === 'order') {
// 订单模块对应的拦截处理
}
return instance;
}
```
四、方便扩展功能
（一）问题
随着项目的不断发展，可能会有新的需求，如请求日志记录、对某些特定类型的请求进行特殊加密等。
（二）代码示例 - 日志记录
javascript
instance.interceptors.request.use(config => {
console.log(`Request URL: ${config.url}, Method: ${config.method}`);
return config;
});
instance.interceptors.response.use(response => {
console.log(`Response data:`, response.data);
return response.data;
});
二次封装axios的好处众多，它不仅使代码更加简洁、易于维护，还能提高开发效率并适应不断变化的项目需求。
