axios请求头及封装代码

请求头影响传参格式

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;