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 相关文章推荐
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
JS原生瀑布流效果实现
Apr 26 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 IE中下载附件问题解决方法
2014/01/07 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
JQuery 常用方法基础教程
2009/02/06 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
JS实现复制功能
2017/03/01 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
解决Python一行输出不显示的问题
2018/12/03 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
简单了解python中的与或非运算
2019/09/18 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
高级运动鞋:GREATS
2019/07/19 全球购物
中专三年学习的个人自我评价
2013/12/12 职场文书
入党转预备思想汇报
2014/01/07 职场文书
开会迟到检讨书
2014/01/08 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
党支部工作总结2015
2015/04/01 职场文书
交通事故案件代理词
2015/05/23 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android