封裝axios，帶請求頭和響應頭

import axios from "axios";
import qs from "qs"; //處理參數
import router from '../router'; //引入路由
import { Loading , Message} from 'element-ui';

let loading = null;

//開始加載動畫
function openLoading(){
  loading = Loading.service({
    lock:true,
    text:'拼命加載中...',
    background:'rgba(0,0,0,.7)'
  });
}

//關閉加載動畫
function closeLoading(){
  loading.close();
}

//添加請求攔截器
axios.interceptors.request.use(
  config => {
    //加載動畫
    openLoading()
    if(localStorage.sessionId){ //如果我的sessionId存在(sessionId其實就是token)
      // 設置統一的請求header
      config.headers.Authorization = localStorage.sessionId //授權（每次請求把sessionId帶給后台）
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//添加響應攔截器
axios.interceptors.response.use(
  response => {
　　//邏輯處理
    if(response.data.errorCode == -1){ //后端反回的狀態值，本應該errorCode是status
      Message({
        type:'warning',
        duration:1500,
        showClose: true,
        message:'當前登錄已失效，請從新登錄！'
      })
      router.push("/logon")//讓用戶從新回到登錄頁面
    }
    return response;
  },
  error => {
　　closeLoading() //請求超時清除加載動畫
    return Promise.resolve(error.response);
  }
);


axios.defaults.baseURL = "http://10.26.41.181:8081/nei";    // 開發

axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.timeout = 6000; //設置請求超時時間

function checkStatus(response) {
  return new Promise((resolve, reject) => {
    if(response && (response.status === 200 || response.status === 304 || response.status === 400)){
　　　try{
　　　　　closeLoading() //關閉加載動畫
      }catch(e){
　　     //拋出異常
        console.log(e)
      }

      resolve(response.data);
    }else{
　　　 try{
 closeLoading() //關閉加載動畫
 }catch(e){
 //拋出異常
 console.log(e)
 }

 Message({ type:'error', showClose: true, message:'網絡異常，請檢查網絡連接是否正常！' }) } }); } export default { post(url, params) { return axios({ method: "post", url, data: params }).then(response => { return checkStatus(response); }); }, get(url, params) { params = qs.stringify(params); return axios({ method: "get", url, params }).then(response => { return checkStatus(response); }); } };

使用：在main.js里面引入這個文件，並掛載到vue原型上，這樣可以通過this.xxxx去拿到

import axios from './api/api.js'   //引入axios文件夾
Vue.prototype.$axios = axios;   //掛載到整個Vue原型上

axios 的使用：在需要請求的頁面如下引用

//post請求
this.$axios.post('url',{key:value}).then(res =>{
   cons.log(res,'后端返回數據') 
})
//get請求
this.$axios.get('url?key=value').then(res =>{
   cons.log(res,'后端返回數據') 
})