vue工程全局設置ajax的等待動效

最近在做vue的項目，使用了element-ui作爲ui組件庫，採用vuex進行狀態管理，與後臺的請求交互採用axios庫實現，原本做的頁面，ajax請求個數也只有三個，將等待動畫的顯示和隱藏通過mutation去控制，但是項目越來越大，請求也越來越多，能否將這個等待動畫與ajax的請求相關聯呢？

1. 實現等待動效
   在element-ui中，提供了兩個方法進行調用loading組件，一個是在需要遮罩的div容器中添加v-loading指令，另一種就是以服務形式調用：Loading.service(options)，在本項目中，在加載數據時，進行全局遮罩，所以設置let loadingInstance = Loading.service({fullscreen:true})。關閉服務形式的調用：loadingInstance.close();
2. axios的攔截器

個人對攔截器的作用的理解是，在請求發送前和響應處理前，對該ajax請求進行一定的設置或者處理，方便對工程內的ajax請求進行統一處理，減少重複代碼。

 //請求攔截器
  axios.interceptors.request.use((config) => {
    // 在發送請求之前做些什麼
    return config;
  }, (error) => {
    // 對請求錯誤做些什麼
    return Promise.reject(error);
  });
 // 添加響應攔截器
 axios.interceptors.response.use((response) => {
    // 對響應數據做點什麼
    return response;
  }, (error) => {
    // 對響應錯誤做點什麼
    return Promise.reject(error);
  });

有了攔截器，我們可以想到，在ajax請求發送前開啓loading動畫，在接收響應後關閉loading動畫。但是要對每個ajax都開關一下loading動畫嗎？其實不必。只需要實現一個ajax的計數器，在個數大於0時，開啓動畫，在個數爲0的時候，關閉動畫。

1. 計數器實現

let loadingInstance;
let loadCounter = {
   count:0,
   show:() => {
       if(count < 0){
          this.count ++;
          loadingInstance = Loading.service({fullscreen:true});
       }
   },
   hide:()=>{
       if(count > 0){
           this.count --;
           this.$nextTick(()=>{//以服務的方式調用的 Loading 需要異步關閉
               loadingInstance.close();
           });
       }
    }
}

使用方法

 //請求攔截器
  axios.interceptors.request.use((config) => {
    loadCounter.show();
    return config;
  }, (error) => {
    return Promise.reject(error);
  });
 // 添加響應攔截器
 axios.interceptors.response.use((response) => {
    loadCounter.hide();
    return response;
  }, (error) => {
    return Promise.reject(error);
  });