如何封装axios:
- 导入axios
import axios from 'axios'
- 自定义实例默认值
const instance = axios.create({
baseURL: '',
timeout: 5000, //请求超时的时间
headers: {
// 可定义统一的请求头部
post: {
'Content-Type': 'application/json'
}
}
});
- 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
- 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
if(response.status === 200){
return response.data;
}else{
console.error("请求错误")
console.error(response)
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
- 导出创建的axios实例
export default instance
完整代码:
// 导入axios
import axios from 'axios'
// 自定义实例默认值
const instance = axios.create({
baseURL: '',
timeout: 5000,//设置请求超时的时间
headers: {
}
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
instance// 对响应数据做点什么
if(response.status === 200){
return response.data;
//这个返回值应根据接口的返回值进行调整,不一定必须是.data
}else{
console.error("请求错误")
console.error(response)
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default instance
axios封装的好处:
- 统一处理,提高效率,便于维护。
- 不用再挂载在Vue实例的原型上,降低了耦合度,两者互不相干了,其中的任何一个出现问题,另一个都能正常运作。