最近在做vue的項目，使用了element-ui作為ui組件庫，采用vuex進(jìn)行狀態(tài)管理，與后臺的請求交互采用axios庫實現(xiàn)，原本做的頁面，ajax請求個數(shù)也只有三個，將等待動畫的顯示和隱藏通過mutation去控制，但是項目越來越大，請求也越來越多，能否將這個等待動畫與ajax的請求相關(guān)聯(lián)呢？
實現(xiàn)等待動效
在element-ui中，提供了兩個方法進(jìn)行調(diào)用loading組件，一個是在需要遮罩的div容器中添加v-loading指令，另一種就是以服務(wù)形式調(diào)用：Loading.service(options)，在本項目中，在加載數(shù)據(jù)時，進(jìn)行全局遮罩，所以設(shè)置let loadingInstance = Loading.service({fullscreen:true})。關(guān)閉服務(wù)形式的調(diào)用：loadingInstance.close();
axios的攔截器
個人對攔截器的作用的理解是，在請求發(fā)送前和響應(yīng)處理前，對該ajax請求進(jìn)行一定的設(shè)置或者處理，方便對工程內(nèi)的ajax請求進(jìn)行統(tǒng)一處理，減少重復(fù)代碼。
//請求攔截器 axios.interceptors.request.use((config) => { // 在發(fā)送請求之前做些什么 return config; }, (error) => { // 對請求錯誤做些什么 return Promise.reject(error); }); // 添加響應(yīng)攔截器 axios.interceptors.response.use((response) => { // 對響應(yīng)數(shù)據(jù)做點什么 return response; }, (error) => { // 對響應(yīng)錯誤做點什么 return Promise.reject(error); });有了攔截器，我們可以想到，在ajax請求發(fā)送前開啟loading動畫，在接收響應(yīng)后關(guān)閉loading動畫。但是要對每個ajax都開關(guān)一下loading動畫嗎？其實不必。只需要實現(xiàn)一個ajax的計數(shù)器，在個數(shù)大于0時，開啟動畫，在個數(shù)為0的時候，關(guān)閉動畫。
計數(shù)器實現(xiàn)
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(()=>{//以服務(wù)的方式調(diào)用的 Loading 需要異步關(guān)閉 loadingInstance.close(); }); } }}使用方法
//請求攔截器 axios.interceptors.request.use((config) => { loadCounter.show(); return config; }, (error) => { return Promise.reject(error); }); // 添加響應(yīng)攔截器 axios.interceptors.response.use((response) => { loadCounter.hide(); return response; }, (error) => { return Promise.reject(error); });以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
