《axios为啥要封装》

一、解决方案

在使用axios进行网络请求时，直接使用原生的axios虽然可以满足基本需求，但为了提高代码的可维护性、复用性以及应对一些项目中常见的问题（如统一处理请求和响应拦截、配置默认参数等），我们需要对axios进行封装。

二、解决请求配置重复的问题

（一）设置默认配置

在多个地方发起请求时，如果每次都写相同的baseURL、timeout等配置会很繁琐。通过封装可以设置默认配置。
```javascript
// 创建axios实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 基础url
timeout: 5000, // 请求超时时间
headers: {'Content-Type': 'application/json'} // 默认请求头
});

export default instance;
```
这样在其他地方使用这个封装后的instance发起请求时，就无需再重复设置这些基础配置了。

三、统一处理请求和响应拦截

（一）请求

可以在请求发出之前做一些操作，例如添加token到请求头。
javascript
instance.interceptors.request.use(config => {
// 获取token，这里假设从localStorage获取
const token = localStorage.getItem('token');
if(token){
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},error => {
return Promise.reject(error);
});


（二）响应

对于响应结果也可以统一处理，比如当响应状态码不是200或者token过期等情况。
javascript
instance.interceptors.response.use(response => {
return response.data; // 直接返回响应体中的data部分
},error => {
if(error.response.status === 401){
// token过期，跳转登录页面等操作
console.log('token过期');
}
return Promise.reject(error);
});


四、增强代码的可读性和易用性

我们可以根据业务需求封装一些特定类型的请求方法，如getWithParams（带参数的get请求）、postWithData（带数据的post请求）等。
```javascript
function getWithParams(url,params){
return instance.get(url,{
params:params
});
}

function postWithData(url,data){
return instance.post(url,data);
}
```
这种封装方式使得代码更加简洁明了，在调用时只需要简单地调用这些封装好的函数即可完成请求操作。对axios进行封装能够为项目开发带来诸多便利。