// axios二次封装,目的：把当前项目中所有请求的公共部分进行统一处理
// + axios.defaults 设置公共的配置项
// + axios.interception 基于拦截器做统一处理
//配置接口的统一前缀【webpack环境 我们根据环境变量，设置不同的前缀，来区分不同的环境】
const env = process.env.NODE_ENV || 'development';
switch (env) {
case 'development':
axios.defaults.baseURL = 'http://...';
break;
case 'test':
axios.defaults.baseURL = 'http://...';
break;
default:
break;
}
axios.defaults.baseURL = 'http://...';
// 设置超时时间
axios.defaults.timeout = 10000;
// 跨域请求携带请求凭证
axios.defaults.withCredentials = true;
// 配置公共的自定义请求头信息 headers['common'] headers['post'] headers['get']
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//post请求对于请求主体信息的统一格式化
axios.defaults.transformRequest = function(data,headers){
if(data === null || typeof data !== 'object') return data;
let contentType = headers['Content-Type'] || headers.post['Content-Type'];
if(contentType.includes('urlencoded')) return Qs.stringify(data);
if(contentType.includes('json')) return JSON.stringify(data);
return data;
}
// 设置响应状态码的校验处理(服务器返回状态吗成功失败)
axios.defaults.validateStatus = function(status){
return status >= 200 && status < 400;
}
// 请求拦截器 当所有配置想处理完，向服务器发送请求之前，拦截现有配置，在做一些统一修改
axios.interception.request.use(function(config){
// 例如，传递token
const token = sessionStorage.getItem('token');
if(token){
config.headers['Authorization'] = token;
}
return config;
})
//请求有结果后，我们在业务层自己调用then/catch方法拦截，可以统一做成功和失败处理
axios.interception.response.use(function onFulfilled(response){
// 服务器正常返回结果&&validateStatus成功
return response.data;
},function onRejected(reason){
// 失败:1服务器返回结果，但是没有通过校验
// 2服务器没有返回结果
// 3请求中断或者超市
let response = reason.response;
if(response){
// 1
switch (response) {
case 401:
// ...
break;
default:
break;
}
}else{
// 2 navigator.onLine检测是否有网络
if(!navigator.onLine){
// 网络异常
}
// 3
if(reason && /(TIMEOUT|ABOUT)/i.test(reason.code)){
}
}
return Promise.reject(reason);
})
export default axios;
后续更新...
