快捷導(dǎo)航

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

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

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

最近在做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);
 });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: