element取消全局loading
背景
前两天在开发一个管理后台项目时, 遇到了一个问题,后端接口返回特别慢,由于该接口调用的是第三方API,无法通过后端去处理。此时想到用loading动画,但随之而来也产生了不少问题, 在此记录一下以方便大家能够遇到此类问题可以借鉴。
处理方案
在表格内添加loading
<el-table
v-loading="loading"
:data="tableData"
border
tooltip-effect="dark"
:row-class-name="tableRowClassName"
style="margin-top: 20px"
>
...
</el-table>
此种方式很简单,在请求开始前设置loading为true,结束后设置为false。element官网也有详细的概述,在此不过多描述。
在全局内容容器内添加动画
第一种方式确实简单,但开发后UI效果并不是特别理想,所以考虑在内容容器内添加loading。此时使用了以服务的方式加载loading。
但此时也出现了一些问题, 首先在请求开始后,立即切换到其它页面,此时还在显示全局loading。
而且再次切回该页面又会再次发起请求,loading显示位置也不正常。
切换路由是要取消请求和loading的,我们需要在组件路由生命周期内进行监听。在离开此路由时,取消此次请求。
以下为具体代码:
离开路由生命周期
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
this.source.cancel("离开此页面取消请求");
next();
},
...
请求事件
getTable() {
const CancelToken = axios.CancelToken;
this.source = CancelToken.source();
const options = {
target: ".el-main",
text: "拼命加载中...",
spinner: "el-icon-loading",
lock: true,
background: "rgba(255,255,255,0.4)",
};
const loadingInstance = this.$loading(options);
this.axios
.post(
"***",
qs.stringify({
name: this.q,
page: this.listQuery.page,
}),
{
cancelToken: this.source.token,
}
)
.then((res) => {
this.tableData = res.data.data;
this.$nextTick(() => {
// 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
})
.catch((thrown) => {
// 如果请求被取消则进入该方法判断
if (axios.isCancel(thrown)) {
console.log("Request canceled", thrown.message);
this.$nextTick(() => {
// 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
} else {
// handle error
}
});
},
在离开页面的同时取消请求,关闭loading动画。
感悟
此次为了追求用户体验感更好,为此也走了不少的弯路,但我觉得还是很有意义的。同时也学到了不少新东西,如怎么取消一个请求等。还是很有收获的。
element取消全局loading的更多相关文章
- vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输
在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...
- 使用Dialog实现全局Loading加载框
Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...
- vue-element-admin 全局loading加载等待
最近遇到需求: 全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能 当拿到这个需求的时候我是拒绝的,因为我以及局部写好了0.0,这是要大改呀....,没办法老板的要求,只能硬着头皮 ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- ajax请求加全局loading , 个别特殊请求不显示loading
项目中,请求开始前加载loading遮罩层,请求结束关闭遮罩,一般都会加在全局中,但有个别请求不需要加全局loading 的话,这时候就需要对这些请求进行配置 全局加loading: ; functi ...
- AXIOS构建请求处理全局loading状态&&AXIOS避免重复请求loading多次出现
一般情况下,在 vue 中结合 axios 的拦截器控制 loading 展示和关闭,是这样的:在 App.vue 配置一个全局 loading. <div class="app&qu ...
- 用Axios Element 实现全局的请求 loading
Kapture 2018-06-07 at 14.57.40.gif demo in github 背景 业务需求是这样子的,每当发请求到后端时就触发一个全屏的 loading,多个请求合并为 ...
- vue和element全局loading
http请求的代码如下: import axios from 'axios' import { Message} from 'element-ui' import store from '../sto ...
- vue全局loading组件
本组件作用在页面加载完成前进行loader提示,提升用户体验,只需要在app.vue中引用一次,整个项目中路由切换时就可以自动进行提示(vuex版): 1. 添加vuex值和方法: import Vu ...
随机推荐
- P4779 【模板】单源最短路径(标准版)单源最短路Dijkstra
题目描述 给定一个$n$个点,$m$条有向边的带非负权图,请你计算从$s$出发,到每个点的距离. 数据保证你能从$s$出发到任意点. 输入格式 第一行为三个正整数$n,m,s$. 第二行起$m$行,每 ...
- 【Android编程】Java利用Socket类编写Metasploit安卓载荷辅助模块
/作者:Kali_MG1937 CSDN博客:ALDYS4 QQ:3496925334/ 注意!此文章被作者标记到 黑历史 专栏中,这意味着本篇文章可能存在 质量低下,流水账文,笔法低质 的问题 为了 ...
- Django基础之模型层(02)
1 重要概念 # 多表查询 """ 正向查询 反向查询 当前查询对象是否含有外键字段 如果有就是正向 没有无则是反向 口诀: 正向查询按外键字段 多对多需要额外再加一个. ...
- ConcurrentSkipListSet - 秒懂
疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 面试必备 + 面试必备 [博客园总入口 ] 疯狂创客圈 经典图书 : <Sprin ...
- CSS 奇思妙想 | 全兼容的毛玻璃效果
通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...
- 从ReentrantLock看AQS (AbstractQueuedSynchronizer) 运行流程
从ReentrantLock看AQS (AbstractQueuedSynchronizer) 运行流程 概述 本文将以ReentrantLock为例来讲解AbstractQueuedSynchron ...
- Kubernetes的资源管理
本节讲解为一个pod配置资源的预期使用量和最大使用量.通过设置这两组参数,可以确保pod公平地使用Kubernetes集群资源,同时也影响着整个集群pod的调度方式. 1.为pod中的容器申请资源 创 ...
- USB上位机通信:CyAPI
至今的工作中,有USB接口通信的需求,记录一下. 建立一个USB设备对象 CCyUSBDevice *USBDevice = new CCyUSBDev(Handle): 打开USB设备 一个USB设 ...
- 源码搭建Zabbix4.0.23LTS监控系统
实验环境 centos 7.5 主机名 IP地址 配置 应用 controlnode 172.16.1.120/24 4核/8G/60G java-1.8.0-openjdk zabbix serve ...
- 26、linux下安装MongoDB
26.1.MongoDB介绍: 1.什么是MongoDB: MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能. Mo ...