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


Posted in Javascript onFebruary 22, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
javascript冒泡排序小结
Apr 10 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
JS二分查找算法详解
Nov 01 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 #Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 #Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 #Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 #Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 #Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 #Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 #Javascript
You might like
PHP Array交叉表实现代码
2010/08/05 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
python自动化生成IOS的图标
2018/11/13 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
学校政风行风评议工作总结
2014/10/21 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
小学教师工作总结2015
2015/04/07 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
经费申请报告范文
2015/05/18 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle