快捷導(dǎo)航

vue工程全局設(shè)置ajax的等待動效的方法

更新時間：2019年02月22日 09:21:08 作者：田臭臉

這篇文章主要介紹了vue工程全局設(shè)置ajax的等待動效的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近在做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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: