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 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
Vue实现一个无限加载列表功能
Nov 13 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
Angular8 实现table表格表头固定效果
Jan 03 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 array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python生成随机验证码的两种方法
2015/12/22 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
django使用html模板减少代码代码解析
2017/12/12 Python
python绘制双柱形图代码实例
2017/12/14 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
Django中template for如何使用方法
2021/01/31 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
财务管理个人自荐书范文
2013/11/24 职场文书
后勤岗位职责
2013/11/26 职场文书
实习单位接收函
2014/01/11 职场文书
18岁生日感言
2014/01/12 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
大学生入党自荐书
2015/03/05 职场文书
岁月神偷观后感
2015/06/11 职场文书
运动会主持词大全
2015/07/02 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书