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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
深入理解(function(){... })();
Aug 16 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
Paypal支付不完全指北
Jun 04 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
php实现映射操作实例详解
2019/10/02 PHP
JS打开新窗口的2种方式
2013/04/18 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
Node.js模块加载详解
2014/08/16 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
js实现消息滚动效果
2017/01/18 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python回调函数用法实例详解
2015/07/02 Python
详解Python的Django框架中的中间件
2015/07/24 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
浅谈python中的占位符
2017/11/09 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
IBatis持久层技术
2016/07/18 面试题
祖国在我心中演讲稿
2014/01/15 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
质量管理标语
2014/06/12 职场文书
求职信范文怎么写
2015/03/19 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
python执行js代码的方法
2021/05/13 Python
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
php实现自动生成验证码的实例讲解
2021/11/17 PHP