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

小編給大家分享一下vue工程全局如何設置ajax的等待動效，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

實現等待動效

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

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的時候，關閉動畫。

計數器實現

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);
 });

看完了這篇文章，相信你對“vue工程全局如何設置ajax的等待動效”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！