最近在做vue的項目，使用了element-ui作為ui組件庫，采用vuex進行狀態管理，與后臺的請求交互采用axios庫實現，原本做的頁面，ajax請求個數也只有三個，將等待動畫的顯示和隱藏通過mutation去控制，但是項目越來越大，請求也越來越多，能否將這個等待動畫與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 loadCounter = (function(){let count = 0;let loadingInstance;const show = () => {if(count > 0){loadingInstance = Loading.service({fullscreen:true});} else {if(loadingInstance) {this.$nextTick(()=>{loadingInstance.close():})}}}return {increment(){count ++;show();},decrement(){count--;show();}} })();

在具體的項目工程里應用時，需要異步關閉loading，這是因為在有些時候，ajax請求發送的很快，還沒有完全開啟動畫時，就已經關閉動畫，這時的動畫時不能關閉的，通過異步調用的方法可以保證動畫的關閉都是有效的，不會出現動畫關不掉的問題。$nextTick與vue組件實例生命周期相關，它指向的this必須是個vue組件，在實際應用時，可以將全局的vue組件作為this的指向。

使用方法

//請求攔截器axios.interceptors.request.use((config) => {loadCounter.increment();return config;}, (error) => {loadCounter.decrement();return Promise.reject(error);});// 添加響應攔截器axios.interceptors.response.use((response) => {loadCounter.decrement();return response;}, (error) => {//異常情況也要關閉loadingloadCounter.decrement();return Promise.reject(error);});

更新

在實際項目中，需要對一些不需要顯示等待動效的ajax請求進行設置例外，我將這些請求添加在白名單內，在計數器中設置白名單列表，修改如下。

let loadCounter = (function(){let count = 0;let loadingInstance;let whiteList = [\/query\/record/];const show = (url) => {if(count > 0){let valid = true;whiteList.forEach(reg=>{if(reg.test(url)){valid = false;}});if(valid){loadingInstance = Loading.service({fullscreen:true});}} else {if(loadingInstance) {this.$nextTick(()=>{loadingInstance.close():})}}}return {increment(url){count ++;show();},decrement(){count--;show();}} })();

總結

以上是生活随笔為你收集整理的vue工程全局设置ajax的等待动效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。