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;