最近遇到需求:

  全局加载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? 这不就是懒加载吗?翻了一 ...

随机推荐

  1. 剑指 Offer 39. 数组中出现次数超过一半的数字

    剑指 Offer 39. 数组中出现次数超过一半的数字 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字. 你可以假设数组是非空的,并且给定的数组总是存在多数元素. 示例 1: 输入: [ ...

  2. C++ 继承方式 //语法:class 子类 :继承方式 父类 //继承方式 三种: //1.公共继承 //2.保护继承 //3.私有继承

    1 //继承方式 2 //语法:class 子类 :继承方式 父类 3 //继承方式 三种: 4 //1.公共继承 5 //2.保护继承 6 //3.私有继承 7 8 #include <ios ...

  3. postman怎么调中文

    事先准备 1 安装好postman. 下载网址:https://www.postman.com/downloads/ 2 下载好app.zip中文压缩包,下载地址:https://wws.lanzou ...

  4. maven将依赖打入jar包中

    1.在pom.xml中加入maven-assembly-plugin插件: <build> <plugins> <plugin> <artifactId> ...

  5. 跟我一起写 Makefile(十二)

    隐含规则 ---- 在我们使用Makefile时,有一些我们会经常使用,而且使用频率非常高的东西,比如,我们编译C/C++的源程序为中间目标文件(Unix下是[.o]文件,Windows下是[.obj ...

  6. pthread_cleanup_push与pthread_cleanup_pop的理解

    一.为什么会有pthread_cleanup_push与pthread_cleanup_pop: 一般来说,Posix的线程终止有两种情况:正常终止和非正常终止.线程主动调用pthread_exit( ...

  7. 计算机网络 中国大学MOOC 哈尔滨工业大学 习题答案

    转自 https://blog.csdn.net/qq_37514135/article/details/82733651 计算机网络作业题 第一章 第一题 如图所示网络.A在t=0时刻开始向C发送一 ...

  8. sqli-labs lesson 54-65

    less 54 需要从数据库的CHALLENGES表中取出key值输入,输入对了才算通过,但是只能做10次尝试. 这里id被单引号包裹,注意闭合单引号即可,剩下的就可以参照less 1获取表中信息即可 ...

  9. zzcms2020代码审计笔记

    在CNVD中看到zzcms后台sql注入漏洞: 漏洞细节未被公开,影响版本zzcms2020,本地搭建一套相同版本找一下漏洞触发点. 打开目录,后台ba***.php文件共有三个: 先看下bad.ph ...

  10. Mysql的分区表

    概论: 分区表一般用作Mysql库表的水平切割(也就是常说的mysql性能优化的几种通用手法"读写分离.分库分表"中的一种),适用于单表的数据量可能很大的场景.因为分区表可以将一个 ...