最近在做vue的項(xiàng)目，使用了element-ui作為ui組件庫，采用vuex進(jìn)行狀態(tài)管理，與后臺(tái)的請(qǐng)求交互采用axios庫實(shí)現(xiàn)，原本做的頁面，ajax請(qǐng)求個(gè)數(shù)也只有三個(gè)，將等待動(dòng)畫的顯示和隱藏通過mutation去控制，但是項(xiàng)目越來越大，請(qǐng)求也越來越多，能否將這個(gè)等待動(dòng)畫與ajax的請(qǐng)求相關(guān)聯(lián)呢？

實(shí)現(xiàn)等待動(dòng)效

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

axios的攔截器

個(gè)人對(duì)攔截器的作用的理解是，在請(qǐng)求發(fā)送前和響應(yīng)處理前，對(duì)該ajax請(qǐng)求進(jìn)行一定的設(shè)置或者處理，方便對(duì)工程內(nèi)的ajax請(qǐng)求進(jìn)行統(tǒng)一處理，減少重復(fù)代碼。

 //請(qǐng)求攔截器 axios.interceptors.request.use((config) => {  // 在發(fā)送請(qǐng)求之前做些什么  return config; }, (error) => {  // 對(duì)請(qǐng)求錯(cuò)誤做些什么  return Promise.reject(error); }); // 添加響應(yīng)攔截器 axios.interceptors.response.use((response) => {  // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么  return response; }, (error) => {  // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么  return Promise.reject(error); });

有了攔截器，我們可以想到，在ajax請(qǐng)求發(fā)送前開啟loading動(dòng)畫，在接收響應(yīng)后關(guān)閉loading動(dòng)畫。但是要對(duì)每個(gè)ajax都開關(guān)一下loading動(dòng)畫嗎？其實(shí)不必。只需要實(shí)現(xiàn)一個(gè)ajax的計(jì)數(shù)器，在個(gè)數(shù)大于0時(shí)，開啟動(dòng)畫，在個(gè)數(shù)為0的時(shí)候，關(guān)閉動(dòng)畫。

計(jì)數(shù)器實(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();      });    }  }}

使用方法

 //請(qǐng)求攔截器 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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長站。