《axios封装的流程》
解决方案
在现代前端开发中，与后端进行数据交互是必不可少的。Axios 是一个基于 Promise 的 HTTP 客户端，它允许我们以一种简单而有效的方式发送请求和接收响应。为了提高代码的可读性、复用性和可维护性，我们可以对 Axios 进行封装。通过封装，我们可以集中处理请求和响应的公共逻辑，如设置默认配置、添加、统一处理错误等。
一、基础封装
创建一个 axios 实例，并设置一些通用的默认配置，例如请求的基础URL、超时时间等。
```javascript
import axios from 'axios';
const service = axios.create({
baseURL: process.env.VUEAPPBASEAPI, // api 的 baseurl
timeout: 5000 // 请求超时时间
});
```
二、添加请求
请求可以在请求发送之前做一些处理，比如添加token到请求头中。
javascript
// 添加请求
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
const token = localStorage.getItem('token');
if (token) {
// 让每个请求携带token-- ['X - Token']为自定义key，请根据实际情况修改
config.headers['X-Token'] = token;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
)
三、添加响应
响应可以用来处理返回的数据或者捕获错误信息。
javascript
// 添加响应
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data;
// 如果返回的状态码不是200，说明后端接口抛出错误
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
});
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
// 对响应错误做点什么
console.log('err' + error); // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error);
}
)
四、导出封装后的实例
最后将封装好的 axios 实例导出，以便在项目中使用。
javascript
export default service;
除了上述这种较为常规的封装思路，还可以根据不同业务场景进一步优化。例如，对于文件上传下载等特殊需求，可以在封装时专门针对这些操作增加特定的方法；也可以根据不同环境（开发、测试、生产）动态调整baseURL等配置。根据项目的实际需求不断优化axios的封装，使其更好地服务于整个项目。
