浅谈vue+element全局loading加载
前言
在我们的平时的工作中,在前后端交互的时候,为了提高页面的观赏性和用户的体验,我们会在页面上添加loading来阻止用户操作来等待接口的返回,这个时候我们会考虑到全局loading还是局部loading,下面小编总结了一下,在开发中自己用到的方法,一起共享。
今天的工作任务是什么?
boss,完成全局loading加载的封装
01
用到的插件
1、element-ui-->ui库
2、lodash--->高效的JavaScript库
3、axios--->基于promise的http库
准备工作安装:
$ npm i element-ui -S
$ npm i lodash -S
$ npm i axios -S
02开启loading
首先我们需要引入element-ui的Loading组件,这个组件有两种调用方式:
1、通过指v-loading
2、通过服务Loading.service();
样式见下图:
api:https://element.eleme.cn/#/zh-CN/component/loading
import { Loading } from "element-ui";
import _ from 'lodash';
let loading = null; //设置全局变量loading
let needRequestCount = 0; //设置全局的请求总数
//开启loading状态
const startLoading = (headers={}) => {
loading = Loading.service({
lock: true, //是否锁定屏幕的滚动
text: headers.text||"加载中……", //loading下面的文字
background: "rgba(0, 0, 0, 0.7)", //loading的背景色
target:headers.target||"body" //loading显示在容器
});
};
03关闭loading
在关闭loading的时候小编为了防止loading的闪动,这里采用了防抖的方法,防抖的计时一般采用300-600ms之前为最佳,在关闭loading的之后,我们要注意全局变量导致的V8垃圾回收机制,把没用的变量清空为null
//关闭loading状态
const endLoading = _.debounce(() => {
loading.close();
loading = null;
},300);
04对多次请求loading的开启
在这里,小编在方法中设置了headers的参数,这个参数的用途在于,在我们请求的时候我们不用的接口和方法可能用到的样式和文字不同,这个时候我们可以通过这个参数来传递
export const showScreenLoading=(headers)=>{
if(needRequestCount == 0&&!loading){
startLoading(headers);
}
needRequestCount++;
}
05对多次请求loading的关闭
在关闭的方法中,小编使用了一个Math.max()取最大值的方法,是为了保险取到的needRequestCount是0
export const hideScreenLoading=()=>{
if(needRequestCount<=0) return
needRequestCount--;
needRequestCount = Math.max(needRequestCount, 0);
if(needRequestCount===0){
endLoading()
}
}
06在请求中设置loading
在这里,我们使用的是axios的请求拦截器,如果不懂axios请求拦截器的童鞋可以看小编上一篇文章谈谈Vue开发过程中用到的插件
我们可以在headers的参数里设置showLoading属性来灵活的设置loading的显示和隐藏
//请求拦截器
instance.interceptors.request.use(
config => {
config.headers.Authorization = Lockr.get("token");
if (config.headers.showLoading !== false) {
showScreenLoading(config.headers);
}
return config;
},error => {
if (config.headers.showLoading !== false) {
hideScreenLoading(config.headers);
}
Message.error("请求超时!");
return Promise.reject(error);
}
);
07在响应中设置loading
在这里,小编用了一个setTimeout定时器是为了模拟请求异步返回,查看loading的状态,在开发中我们可以去掉
//响应拦截器
instance.interceptors.response.use(
response => {
if (response.status == 200) {
setTimeout(() => {
if (response.config.headers.showLoading !== false) {
hideScreenLoading();
}
}, 500);
return response.data;
}
},
error => {
if (response.config.headers.showLoading !== false) {
hideScreenLoading();
}
return Promise.reject(error);
}
);
return instance(config);
}
此处应该有掌声
08完整的代码
Q
我可以直接用吗?
小丑
开箱即用,直接带走,就问你香不香
import axios from "axios";
import Lockr from "lockr";
import { showScreenLoading, hideScreenLoading } from "./loading";
import { Message } from "element-ui";
class Service {
construct() {
this.baseURL = process.env.VUE_APP_URL;
this.timeout = 3000; //请求时间
}
request(config) {
let instance = axios.create({
baseURL: this.baseURL,
timeout: this.timeout
});
//请求拦截器
instance.interceptors.request.use(
config => {
config.headers.Authorization = Lockr.get("token");
if (config.headers.showLoading !== false) {
showScreenLoading(config.headers);
}
return config;
},
error => {
if (config.headers.showLoading !== false) {
hideScreenLoading(config.headers);
}
Message.error("请求超时!");
return Promise.reject(error);
}
);
//响应拦截器
instance.interceptors.response.use(
response => {
if (response.status == 200) {
setTimeout(() => {
if (response.config.headers.showLoading !== false) {
hideScreenLoading();
}
}, 500);
return response.data;
}
},
error => {
if (response.config.headers.showLoading !== false) {
hideScreenLoading();
}
return Promise.reject(error);
}
);
return instance(config);
}
}
export default new Service();
import { Loading } from "element-ui";
import _ from 'lodash';
let loading = null;
let needRequestCount = 0;
//开启loading状态
const startLoading = (headers={}) => {
loading = Loading.service({
lock: true,
text: headers.text||"加载中……",
background: "rgba(0, 0, 0, 0.7)",
target:headers.target||"body"
});
};
//关闭loading状态
const endLoading = _.debounce(() => {
loading.close();
loading = null;
},300);
export const showScreenLoading=(headers)=>{
if(needRequestCount == 0&&!loading){
startLoading(headers);
}
needRequestCount++;
}
export const hideScreenLoading=()=>{
if(needRequestCount<=0) return
needRequestCount--;
needRequestCount = Math.max(needRequestCount, 0);
if(needRequestCount===0){
endLoading()
}
}
export default {};
- 漂洋过海! 英文域名d.me小六位易主
- Python基础09 面向对象的进一步拓展
- QT中获取选中的radioButton的两种方法
- QT中根据ID设置radio按钮
- QWebView在 Qt 5.x中编译出错:File not found: main.obj
- Qt实现小功能之列表无限加载
- Python基础08 面向对象的基本概念
- 如何选择合适的PaaS
- 使用Qt installer framework制作安装包
- Qt Style Sheet实践(三):QCheckBox和QRadioButton
- 堆排序
- 剑指OFFER之旋转数组的最小数字(九度OJ1386)
- Qt Style Sheet实践(四):行文本编辑框QLineEdit及自动补全
- 剑指OFFER之旋转数组的最小数字(九度OJ1386)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Google Guava Cache 使用
- Linux下安装maven3.6.2遇到的问题
- Unity3D网络通讯(五)--Socket通讯之Udp通讯
- IP不能作为rocketmq 的topic
- Unity3D网络通讯(六)-- UnityWebRequest实现WebService通讯
- Java Maven编译时没问题,运行时报java.lang.NoSuchMethodError
- 树莓派基础实验34:L298N模块驱动直流电机实验
- The consumer group[PushConsumer] has been created before, specify another name please
- 虚拟机系列 | JVM特点,基础结构与执行周期
- 报错 解决-bash: fork: retry: Resource temporarily unavailable
- 结构与算法(04):排序规则与查找算法
- 手把手教你在 TKE 集群中实现简单的蓝绿发布和灰度发布
- 虚拟机系列 | JVM类加载机制
- 树莓派综合项目2:智能小车(一)四轮驱动
- java 字节流入门(内存数组流->文件流)