axios常用配置及封装
时间: 2023-05-08 14:02:23 浏览: 81
axios是现在前端开发中最主流的网络请求库之一,常用于请求后端API接口。虽然axios本身已提供了很好的配置及封装接口,但在实际项目开发中,我们还是需要针对项目的需要进行一些额外的封装和配置。
常用配置
1. baseURL:设置默认请求的url,方便统一管理。
2. timeout:设置请求超时时间。
3. withCredentials:设置是否携带cookie。
4. headers:设置请求头信息,如token等。
5. responseType:设置返回数据的类型。
常用封装
1. 请求拦截器:在请求发送之前进行一些处理,如设置请求头,loading等。
```
axios.interceptors.request.use(config => {
// do something
return config;
}, error => {
return Promise.reject(error)
});
```
2. 响应拦截器:在请求返回之后进行一些处理,如对返回状态码做统一处理。
```
axios.interceptors.response.use(response => {
// do something
return response;
}, error => {
return Promise.reject(error)
});
```
3. 错误处理:对接口请求出错进行统一处理,如弹窗提示等。
```
function errorHandler(error) {
// do something
return Promise.reject(error);
}
axios.get(url).then(response => {
// do something
}).catch(error => {
errorHandler(error);
});
```
4. 封装请求方法:根据具体场景,将常用的请求方法进行封装,方便调用。
```
function get(url, params) {
return axios.get(url, { params })
}
function post(url, data) {
return axios.post(url, data)
}
```
5. 配置化封装:根据项目需要,将axios的配置及封装放到一个统一的文件中,方便管理。
```
import axios from 'axios';
import qs from 'qs';
// 设置默认请求url
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;
// 请求拦截器
axios.interceptors.request.use(config => {
// do something
return config;
}, error => {
return Promise.reject(error)
});
// 响应拦截器
axios.interceptors.response.use(response => {
// do something
return response;
}, error => {
return Promise.reject(error)
});
// 封装请求方法
function get(url, params) {
return axios.get(url, { params })
}
function post(url, data) {
return axios.post(url, qs.stringify(data))
}
export default {
get,
post
}
```
综上所述,axios的配置及封装对于提高开发效率和项目的可维护性非常重要。在实际项目开发中,我们需要根据具体需要对axios进行适当的封装和配置,使其更符合项目的实际需求。