对axios进行二次封装
时间: 2024-05-31 19:05:33 浏览: 86
axios是一种基于Promise的HTTP客户端,用于浏览器和Node.js。对于一些常见的HTTP请求操作(例如获取、添加、更新和删除数据),它提供了许多有用的功能。
二次封装axios可以更好地适应我们的项目需求,同时提高我们的开发效率。一般来说,我们需要对axios进行二次封装的原因有以下几点:
1. 统一处理请求异常,例如请求超时、网络错误等;
2. 统一处理请求头、请求参数等公共信息;
3. 根据具体的业务需求,进行请求的拦截和转换;
4. 统一处理响应数据,例如对响应数据进行统一的错误处理、响应数据格式化等。
下面是一个简单的二次封装axios的示例代码:
```
import axios from 'axios';
const request = axios.create({
baseURL: 'http://example.com/api',
timeout: 5000
});
request.interceptors.request.use(config => {
// 统一处理请求头、请求参数等公共信息
config.headers.Authorization = localStorage.getItem('token') || '';
return config;
}, error => {
// 统一处理请求异常
console.error(error);
return Promise.reject(error);
});
request.interceptors.response.use(response => {
// 统一处理响应数据
const data = response.data;
if (data.code !== 0) {
console.error(data.message);
return Promise.reject(data);
}
return data.result;
}, error => {
// 统一处理响应异常
console.error(error);
return Promise.reject(error);
});
export default request;
```
上述代码中,我们首先使用`axios.create`方法创建了一个axios实例`request`,并通过`baseURL`和`timeout`属性设置了该实例的默认配置。接着,我们通过`request.interceptors.request.use`和`request.interceptors.response.use`分别定义了请求拦截器和响应拦截器。在这些拦截器中,我们可以对请求和响应数据进行各种处理,例如添加公共请求头、处理异常信息、格式化响应数据等。最后,我们将该实例导出,供项目中其他模块使用。
阅读全文