vue-element-admin 全局loading加载等待

最近遇到需求:

　　全局加载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 转载请注明出处,否则会追究。