vue工程全局设置ajax的等待动效
最近在做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 loadCounter = (function(){let count = 0;let loadingInstance;const show = () => {if(count > 0){loadingInstance = Loading.service({fullscreen:true});} else {if(loadingInstance) {this.$nextTick(()=>{loadingInstance.close():})}}}return {increment(){count ++;show();},decrement(){count--;show();}}
})();
在具体的项目工程里应用时,需要异步关闭loading,这是因为在有些时候,ajax请求发送的很快,还没有完全开启动画时,就已经关闭动画,这时的动画时不能关闭的,通过异步调用的方法可以保证动画的关闭都是有效的,不会出现动画关不掉的问题。$nextTick与vue组件实例生命周期相关,它指向的this必须是个vue组件,在实际应用时,可以将全局的vue组件作为this的指向。
使用方法
//请求拦截器axios.interceptors.request.use((config) => {loadCounter.increment();return config;}, (error) => {loadCounter.decrement();return Promise.reject(error);});// 添加响应拦截器axios.interceptors.response.use((response) => {loadCounter.decrement();return response;}, (error) => {//异常情况也要关闭loadingloadCounter.decrement();return Promise.reject(error);});
更新
在实际项目中,需要对一些不需要显示等待动效的ajax请求进行设置例外,我将这些请求添加在白名单内,在计数器中设置白名单列表,修改如下。
let loadCounter = (function(){let count = 0;let loadingInstance;let whiteList = [\/query\/record/];const show = (url) => {if(count > 0){let valid = true;whiteList.forEach(reg=>{if(reg.test(url)){valid = false;}});if(valid){loadingInstance = Loading.service({fullscreen:true});}} else {if(loadingInstance) {this.$nextTick(()=>{loadingInstance.close():})}}}return {increment(url){count ++;show();},decrement(){count--;show();}}
})();
vue工程全局设置ajax的等待动效相关推荐
- App动效原理和应用设计
时下对动效的追捧,疯狂至可以用一句话形容--"没有动效的APP,简直不是好的APP".优秀的动效设计在提升产品体验.用户粘性方面的积极作用有目共睹,已然成为现下Web.APP产品交 ...
- div旋转 vue_详细解析:uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言 上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...
- vue项目调用通用组件_详细解析:uniapp项目|vue组件形式实现的科技感loading纯CSS动效...
前言 本人是一枚并不安分守己的后端程序猿,一直对前端开发"垂涎三尺",所以,一有机会就会"不务正业"一番.最近,发现了一个非常好的学习资料,于是乎,我的老毛病又 ...
- Vue+Echarts构建可视化大数据平台实战项目(上)粒子动效,登录界面抖动,背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
- vue类似直播点赞的撒花动效
用vue实现类似直播点赞的撒花动效,点击撒花按钮,花朵依次冒出,分别向两边扩开,到中间时向中间回笼,在继续往上飘,当移动到百分之九十几的时候用透明度渐变淡出消失,总体效果如下: 主要使用CSS3的@k ...
- 详细解析:uni-app|vue组件实现茶杯中茶水浮动loading纯CSS动效
前言 前面我已经跟大家分享了[科技感Loading动效]和[水珠晃动Loading动效]两篇文章了,如果大家没有读过,建议大家花一点点时间去看一下,有了前两篇文章的基础后,这次,小凡给大家再分享一个茶 ...
- 直播间赠送礼物动效、选礼物列表、赠送数量,礼物连发排队处理,Vue项目
1.可以选择送的是礼物列表的哪一个.可以选择送的数量x1x2x3 2.礼物做了排队展示的处理,可以解决礼物连续发送.监听到别人发送礼物接口数据回调的排队问题,不会冲刷掉礼物动效 下面是一个完整的送礼物 ...
- vue动效:放大缩小与上下移动
vue动效:放大缩小与上下移动 标题: Vue动效技巧:流畅放大缩小与优雅上下移动 在现代Web开发中,Vue.js已经成为了最受欢迎的JavaScript框架之一.它的简洁性和灵活性使得开发人员能够 ...
- Vue 路由 过渡动效 数据获取
过渡动效 <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition><rou ...
最新文章
- cuda cudnn pytorch版本对应关系
- python爬取天眼查存入excel表格_爬虫案例1——爬取新乡一中官网2018届高考录取名单...
- 第一次使用MsChart运行提示:ChartImg.axd 执行子请求时出错。
- 抗原试剂盒也卷起来了,我的塑料袋不会影响房价吧?
- HTML课堂笔记02-21
- 【Java多线程编程】选号程序
- 分享:When.js 2.0.0 发布,Promises/A 的实现
- 线性回归csv数据集_用mxnet的gluon线性回归训练只有两个特征的数据集
- 一个小技巧 禁止浏览器弹出Alert
- mysql分布式插入_添砖加瓦:MySQL分布式部署
- 独具匠心的好书:评《构建高性能Web站点》
- MySQL 字符集和校对
- C++ STL库(6)
- 360浏览器+7654联盟
- Particle Filtering粒子滤波
- spider pi 智能视觉六足机器人 开箱介绍 0602
- SLURM Array Job
- 用Matlab搞了个小工具,以后给你女朋友的证件照换底色再也不用发愁了
- 中国颅骨固定系统行业市场供需与战略研究报告
- 开关面板如何自己印字_墙壁开关上的商标是怎么印上去的
热门文章
- 转 性能分析工具汇总
- sql分区-纵向分表与横向分区表(转)
- 关于Jquery中ajax方法data参数用法的总结
- wxpython多个面板_wxpython笔记:wxPython的布局管理实践【嵌入matplotlib、页面切换】...
- python中常用模块_工作中用过的Python常用模块:(基于3.x)
- aws终止实例后还收费吗_因 AWS 数据中心断电,1TB 数据丢失了
- qPCR实验疑难杂问解答
- nginx 转发_除了转发和负载均衡,nginx又一次让他玩出新高度
- 安装ssr_12月23日先锋首测启动,累计登录3天必得SSR!
- 第四范式获信通院尖峰开源项目及开源人物双料大奖