请求头影响传参格式
axios直接请求是application/json;charset=UTF-8,参数是(request payload)
修改请求头是'Content-Type': 'application/x-www-form-urlencoded',参数是formdata
import axios from 'axios'
import qs from 'qs'
import store from '@/vuex/store'
import router from '@/router'
//axios原生的也添加请求拦截,在上传图片时候有用到axios本身
// 请求拦截
axios.interceptors.request.use(config => {
store.commit('SHOW_LOADING');
return config;
}, error => {
return Promise.reject(error);
});
// 返回拦截
axios.interceptors.response.use(response => {
store.commit('HIDE_LOADING');
return response.data;
}, error => {
store.commit('HIDE_LOADING');
return Promise.reject(error);
});
const axiosInstance = axios.create({
// axios实例配置
timeout: 15000,
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: [function(data) {
// 请求前参数序列化
return qs.stringify(data);
}]
});
axiosInstance.defaults.retry = 3; // 请求超时次数上限
axiosInstance.defaults.retryDelay = 1000; // 重新请求延时
// 请求拦截
axiosInstance.interceptors.request.use(config => {
store.commit('SHOW_LOADING');
return config;
}, error => {
return Promise.reject(error);
});
// 返回拦截
axiosInstance.interceptors.response.use(response => {
store.commit('HIDE_LOADING');
let params = qs.parse(response.config.data);
let date = new Date();
console.group('%cResponse', 'color:darkred');
// console.log(`%c${params.debug.name}`, 'font-family:"Microsoft Yahei";font-size: 18px;color:#9966CC;'); //暑假活动先注释
console.log(`%c${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`, 'font-size: 16px;');
console.log(`%c${response.config.url}`, 'font-size: 20px');
console.log(response);
console.log(params);
console.log(response.data);
console.groupEnd();
switch (response.data.success.ok) {
case 1:
store.commit('SHOW_TOAST', {
text: response.data.success.message
});
break;
case 102:
store.commit('SHOW_TOAST', {
text: response.data.success.message
});
break;
case 103:
store.commit('SHOW_TOAST', {
text: response.data.success.message
});
break;
case 408:
// key失效, 重新登录
store.commit('SHOW_LOADING');
store.commit('SHOW_TOAST', {
text: '账号验证失败,1秒后跳转登录页面'
});
setTimeout(() => {
store.commit('HIDE_LOADING');
store.commit('HIDE_TOAST');
router.push({
name: 'Login'
});
}, 1000);
// if (!window.debug) {
// setTimeout(() => {
// window.cordova.exec(res => {
// // Success
// store.commit('HIDE_LOADING');
// }, err => {
// // Fail
// err && console.log(err);
// }, 'NativeExt', 'go', ['home_go_my', 'hello']);
// }, 1000);
// }
break;
}
return response.data;
}, error => {
// 404等问题可以在这里处理
if (error && error.response) {
switch (error.response.status) {
case 404:
store.commit('SHOW_TOAST', {
text: '请求地址为空'
});
break;
}
store.commit('HIDE_LOADING');
return Promise.reject(error);
} else if (error.code === 'ECONNABORTED') {
// 请求时间超过timeout初始值
let config = error.config;
config.__retryCount = config.__retryCount || 0; // 设置变量以跟踪重试次数
if (config.__retryCount >= config.retry) {
// 判断请求是否已经达到重试上限
store.commit('SHOW_TOAST', {
text: '请检查网络后重试'
});
store.commit('HIDE_LOADING');
return Promise.reject(error); // Reject with the error
} else {
store.commit('HIDE_LOADING');
}
config.__retryCount += 1; // 叠加重试次数
let backoff = new Promise(resolve => {
// 处理重新请求回调
store.commit('SHOW_TOAST', {
text: `请求超时,${config.retryDelay / 1000}秒后进行第${config.__retryCount}次请求重试`
});
setTimeout(() => {
resolve();
}, config.retryDelay || 1);
});
return backoff.then(() => {
// 重新请求
config.data = qs.parse(config.data); // 因为全局设置了拦截前参数序列化, 再次请求前必须要反序列
return axiosInstance(config);
});
}
});
export default axiosInstance;