有封装过 Axios 吗?介绍一下你项目实践中的 Axios 封装逻辑?
时间: 2024-01-17 09:05:49 浏览: 28
好的,关于您的问题,我很乐意回答。关于 Axios 的封装,我们项目中采用了类似于拦截器的机制,通过对请求和响应进行处理,可以实现对请求头、响应数据、响应码等的统一封装和处理。我们也对一些常见错误码进行了处理和提示,提升了代码的可读性和可维护性。具体实现可以参考以下代码:
```
import axios from 'axios';
// 创建 axios 实例
const instance = axios.create({
baseURL: 'http://xxx.com',
});
// 请求拦截器
instance.interceptors.request.use((config) => {
config.headers.token = localStorage.getItem('token');
return config;
}, (error) => {
console.error(`请求出错:${error}`);
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use((response) => {
const { data } = response;
// 处理一些错误码
if (data.code !== 200) {
console.error(`[${data.code}] 请求出错:${data.message}`);
return Promise.reject(data);
}
return data.data;
}, (error) => {
console.error(`请求出错:${error}`);
return Promise.reject(error);
});
export default instance;
```
这是我们封装的一个简单的 Axios 例子,具体实现会因项目不同而有所差异。希望这能回答您的问题。