vue-element-admin 全局loading加载等待
最近遇到需求:
全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能
当拿到这个需求的时候我是拒绝的,因为我以及局部写好了0.0,这是要大改呀....,没办法老板的要求,只能硬着头皮改了;老规矩先去百度一下广大开发的思路,我发现好多开发是直接写在拦截器内的,在拦截器内调用element ui的loading方法,在接口请求的时候开始启动加载loading,在接口返回和接口报错抛异常的时候关闭loading,............嗯......不错不错.我要了
我在大家的思路上稍微改动了一下,因为和我的需求有一点不同,我们的需求是可以手动控制是否展示加载等待的功能,既然是手动控制那么肯定不能直接在拦截器里面才开始调用loading方法了,往前推一步,在调接口的时候就开始控制是否启用loading方法,如果需要这么操作的话我们就需要手动封装axios的调用,还好我有先见之明,以前开发的时候就封装了axios下面给大家看一下我的代码:

这么一看就清晰多了,拦截器的原理就是在发起请求的时候拦截一次,在返回的时候再拦截一次,我们在拦截器拦截前就已经处理了加载等待了,我们请求时就不需要再调用加载等待了,我们只需要在返回拦截时去调用结束加载等待即可,如下图:
下面我们在看看关键的加载等待的方法,这个方法网上都有,我这边基本上也是借用网上大神的方法,不过时间有点久,忘记是哪位大神的代码了,我这边贴不了原地址大佬的代码,希望那位大佬看到不会生气0.0

方法到这里基本上就结束了全局加载等待
vue-element-admin 全局loading加载等待的更多相关文章
- 使用Dialog实现全局Loading加载框
Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...
- vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...
- [Swift通天遁地]一、超级工具-(11)使用EZLoadingActivity制作Loading加载等待动画
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- js+css实现全局loading加载
js var Mask = function() { //定义一个Mask对象 this.btn = ["取消", "确定"], this.init = fun ...
- vue问题八:动态加载loading、浏览器图标
全局动态加载loading: 参考文档:https://blog.csdn.net/qq_34825875/article/details/79570301 在main.js或者index.js引用 ...
- vue2 自定义全局组件(Loading加载效果)
vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...
- vue axios配置 发起请求加载loading请求结束关闭loading
axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...
- WPF加载等待动画
原文:WPF加载等待动画 原文地址:https://www.codeproject.com/Articles/57984/WPF-Loading-Wait-Adorner 界面遮罩 <UserC ...
- vue实现menu菜单懒加载
本文将在vue+element ui项目中简单实现menu菜单的懒加载. 最近接到这样的需求:菜单的选项不要固定的,而是下一级菜单选项需要根据上级菜单调接口来获取.what? 这不就是懒加载吗?翻了一 ...
随机推荐
- 剑指 Offer 39. 数组中出现次数超过一半的数字
剑指 Offer 39. 数组中出现次数超过一半的数字 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字. 你可以假设数组是非空的,并且给定的数组总是存在多数元素. 示例 1: 输入: [ ...
- C++ 继承方式 //语法:class 子类 :继承方式 父类 //继承方式 三种: //1.公共继承 //2.保护继承 //3.私有继承
1 //继承方式 2 //语法:class 子类 :继承方式 父类 3 //继承方式 三种: 4 //1.公共继承 5 //2.保护继承 6 //3.私有继承 7 8 #include <ios ...
- postman怎么调中文
事先准备 1 安装好postman. 下载网址:https://www.postman.com/downloads/ 2 下载好app.zip中文压缩包,下载地址:https://wws.lanzou ...
- maven将依赖打入jar包中
1.在pom.xml中加入maven-assembly-plugin插件: <build> <plugins> <plugin> <artifactId> ...
- 跟我一起写 Makefile(十二)
隐含规则 ---- 在我们使用Makefile时,有一些我们会经常使用,而且使用频率非常高的东西,比如,我们编译C/C++的源程序为中间目标文件(Unix下是[.o]文件,Windows下是[.obj ...
- pthread_cleanup_push与pthread_cleanup_pop的理解
一.为什么会有pthread_cleanup_push与pthread_cleanup_pop: 一般来说,Posix的线程终止有两种情况:正常终止和非正常终止.线程主动调用pthread_exit( ...
- 计算机网络 中国大学MOOC 哈尔滨工业大学 习题答案
转自 https://blog.csdn.net/qq_37514135/article/details/82733651 计算机网络作业题 第一章 第一题 如图所示网络.A在t=0时刻开始向C发送一 ...
- sqli-labs lesson 54-65
less 54 需要从数据库的CHALLENGES表中取出key值输入,输入对了才算通过,但是只能做10次尝试. 这里id被单引号包裹,注意闭合单引号即可,剩下的就可以参照less 1获取表中信息即可 ...
- zzcms2020代码审计笔记
在CNVD中看到zzcms后台sql注入漏洞: 漏洞细节未被公开,影响版本zzcms2020,本地搭建一套相同版本找一下漏洞触发点. 打开目录,后台ba***.php文件共有三个: 先看下bad.ph ...
- Mysql的分区表
概论: 分区表一般用作Mysql库表的水平切割(也就是常说的mysql性能优化的几种通用手法"读写分离.分库分表"中的一种),适用于单表的数据量可能很大的场景.因为分区表可以将一个 ...