最近遇到需求:

  全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能

当拿到这个需求的时候我是拒绝的,因为我以及局部写好了0.0,这是要大改呀....,没办法老板的要求,只能硬着头皮改了;老规矩先去百度一下广大开发的思路,我发现好多开发是直接写在拦截器内的,在拦截器内调用element ui的loading方法,在接口请求的时候开始启动加载loading,在接口返回和接口报错抛异常的时候关闭loading,............嗯......不错不错.我要了

我在大家的思路上稍微改动了一下,因为和我的需求有一点不同,我们的需求是可以手动控制是否展示加载等待的功能,既然是手动控制那么肯定不能直接在拦截器里面才开始调用loading方法了,往前推一步,在调接口的时候就开始控制是否启用loading方法,如果需要这么操作的话我们就需要手动封装axios的调用,还好我有先见之明,以前开发的时候就封装了axios下面给大家看一下我的代码:

import request from '@/utils/PFT_request'---------拦截器
import { showLoading } from '@/utils/loading'------加载等待开启方法
url:接口api,
data:参数
dom:html中的class或id传参时需要加'./#',因为loading会用到js的querySelector属性方法,次属性用于区分加载等待是整个页面加载等待还是局部某一块dom的加载等待---非必传,默认整个页面加载等待
bool:区分是否开启加载等待----非必传,默认开启加载等待
可以看到图片中我封装了多个类型的axios,因为并不是所有请求都需要加载等待,例如get请求,我们公司get请求默认get请求是加载一些初始数据的,这些数据是不需要给客户看到的如果也有加载等待的话,体验就不好了;
我只在post内加了这么多参数用于区分是否需要加载等待及全局和局部加载等待,另外axiosDownload请求是文件流类型,属于比较特殊请求,区分出来便于开发中的数据处理,这一部分基本上全部都需要加载等待,因为我们要告诉客户,您的数据正在下载请求数据
 
请求前的方法我们处理好了,请求后,返回的方法和网上的差不多都是返回结果时结束
我们来处理掉一些干扰元素直接看拦截器的本质内容

这么一看就清晰多了,拦截器的原理就是在发起请求的时候拦截一次,在返回的时候再拦截一次,我们在拦截器拦截前就已经处理了加载等待了,我们请求时就不需要再调用加载等待了,我们只需要在返回拦截时去调用结束加载等待即可,如下图:

下面我们在看看关键的加载等待的方法,这个方法网上都有,我这边基本上也是借用网上大神的方法,不过时间有点久,忘记是哪位大神的代码了,我这边贴不了原地址大佬的代码,希望那位大佬看到不会生气0.0

方法到这里基本上就结束了全局加载等待

 
 本文出自于https://www.cnblogs.com/sws-kevin/p/14237428.html 转载请注明出处,否则会追究。

vue-element-admin 全局loading加载等待的更多相关文章

  1. 使用Dialog实现全局Loading加载框

    Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...

  2. vue+elementUI+axios实现的全局loading加载动画

    在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...

  3. [Swift通天遁地]一、超级工具-(11)使用EZLoadingActivity制作Loading加载等待动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  4. js+css实现全局loading加载

    js var Mask = function() { //定义一个Mask对象 this.btn = ["取消", "确定"], this.init = fun ...

  5. vue问题八:动态加载loading、浏览器图标

    全局动态加载loading: 参考文档:https://blog.csdn.net/qq_34825875/article/details/79570301 在main.js或者index.js引用  ...

  6. vue2 自定义全局组件(Loading加载效果)

    vue2 自定义全局组件(Loading加载效果) github地址: https://github.com/ccyinghua/custom-global-component 一.构建项目 vue ...

  7. vue axios配置 发起请求加载loading请求结束关闭loading

    axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...

  8. WPF加载等待动画

    原文:WPF加载等待动画 原文地址:https://www.codeproject.com/Articles/57984/WPF-Loading-Wait-Adorner 界面遮罩 <UserC ...

  9. vue实现menu菜单懒加载

    本文将在vue+element ui项目中简单实现menu菜单的懒加载. 最近接到这样的需求:菜单的选项不要固定的,而是下一级菜单选项需要根据上级菜单调接口来获取.what? 这不就是懒加载吗?翻了一 ...

  10. APP的六种loading加载样式,全在这...

    今天这篇文章是给大家分享的loading加载的设计,文章里面会有一些实例在这分享给大家! 大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据, ...

随机推荐

  1. 比较两个NSDate类型的参数相差的时间差

    +(NSInteger)getDaysFrom:(NSDate *)serverDate To:(NSDate *)endDate { NSCalendar *gregorian = [[NSCale ...

  2. linux 双网卡实现

    linux实现双网卡,在虚拟机中创建一个新网卡,NAT方式连接,其中eth0设置为连接外网,目前eth0为自动分配状态,所以将代码注释掉了,eth1设置为连接内网.

  3. Ext TabPanel items高度宽度自适应

    写Ext的时候经常会遇到一些莫名其妙,令人感到非常神奇的问题,甚至都没办法用语言去描述它,搞的人想请教一下百度或Google都不知道该去怎么问,简直能够令人发疯.先来看张截图吧. 有没有注意到里面的G ...

  4. uva 11983 Weird Advertisement 扫描线

    Weird Advertisement Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/probl ...

  5. shell编程基础语法

    创建文件:touch aaa.sh 把文件变成可执行的命令: chmod +x /Users/dream-mac/Desktop/aaa.sh (这里是文件路径,如果在当前路径下,只需要把文件名写到这 ...

  6. python的列表生成式

    列表生成式 列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 举个例子,要生成list [1, 2, 3, 4, 5, 6, 7, ...

  7. IBM rational rose画时序图软件破解安装

    上边这个链接是开头的安装步骤,照着链接中的步骤安装完之后,接下来看下边. 1.然后安装完成打开软件“IBM Rational License Keyadministrator”.出现下图:选中第二项“ ...

  8. Linux-Xshell会话保持

    1.Xshell客户端设置 2.服务端设置 修改/etc/ssh/sshd_config文件,找到 ClientAliveInterval 0和ClientAliveCountMax 3并将注释符号( ...

  9. github开源库(二)

    21.drag-sort-listview DragSortListView(DSLV)是Android ListView的一个扩展,支持拖拽排序和左右滑动删除功能.重写了TouchIntercept ...

  10. 20155235 2016-2017-2 《Java程序设计》第5周学习总结

    20155235 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 第八章知识点 语法与继承结构 使用try.catch 异常继承结构 要抓还是要抛 贴心还是造 ...