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控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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 连接mssql数据库 初学php笔记
2010/03/01 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
js闭包实例汇总
2014/11/09 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python AES加密模块用法分析
2017/05/22 Python
python实现用户管理系统
2018/01/10 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Django框架安装方法图文详解
2019/11/04 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
好的自荐信包括什么内容
2013/11/07 职场文书
物理教师自荐信范文
2013/12/28 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
党的作风建设心得体会
2014/10/22 职场文书
小学教师自我评价
2015/03/04 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android