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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
基于jquery的放大镜效果
May 30 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
微信小程序工具函数封装
Oct 28 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
无限级别菜单的实现
2006/10/09 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
浅析Ajax语法
2016/12/05 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
python构建自定义回调函数详解
2017/06/20 Python
python实现自动发送邮件
2018/06/20 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
介绍一下gcc特性
2012/01/20 面试题
爱国演讲稿500字
2014/05/04 职场文书
热门专业求职信
2014/05/24 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
单位病假条范文
2015/08/17 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
MySQL通过binlog恢复数据
2021/05/27 MySQL