vue工程全局设置ajax的等待动效

栏目: JavaScript · 发布时间: 6年前

内容简介:最近在做vue的项目,使用了element-ui作为ui组件库,采用vuex进行状态管理,与后台的请求交互采用axios库实现,原本做的页面,ajax请求个数也只有三个,将等待动画的显示和隐藏通过mutation去控制,但是项目越来越大,请求也越来越多,能否将这个等待动画与ajax的请求相关联呢?在element-ui中,提供了两个方法进行调用loading组件,一个是在需要遮罩的div容器中添加v-loading指令,另一种就是以服务形式调用:Loading.service(options),在本项目中,

最近在做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 loadingInstance;
let loadCounter = {
   count:0,
   show:() => {
       if(count < 0){
          this.count ++;
          loadingInstance = Loading.service({fullscreen:true});
       }
   },
   hide:()=>{
       if(count > 0){
           this.count --;
           this.$nextTick(()=>{//以服务的方式调用的 Loading 需要异步关闭
               loadingInstance.close();
           });
       }
    }
}

使用方法

//请求拦截器
  axios.interceptors.request.use((config) => {
    loadCounter.show();
    return config;
  }, (error) => {
    return Promise.reject(error);
  });
 // 添加响应拦截器
 axios.interceptors.response.use((response) => {
    loadCounter.hide();
    return response;
  }, (error) => {
    return Promise.reject(error);
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法之美

算法之美

左飞 / 电子工业出版社 / 2016-3 / 79.00元

《算法之美——隐匿在数据结构背后的原理(C++版)》围绕算法与数据结构这个话题,循序渐进、深入浅出地介绍了现代计算机技术中常用的40 余个经典算法,以及回溯法、分治法、贪婪法和动态规划等算法设计思想。在此过程中,《算法之美——隐匿在数据结构背后的原理(C++版)》也系统地讲解了链表(包括单向链表、单向循环链表和双向循环链表)、栈、队列(包括普通队列和优先级队列)、树(包括二叉树、哈夫曼树、堆、红黑......一起来看看 《算法之美》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具