背景

前两天在开发一个管理后台项目时, 遇到了一个问题,后端接口返回特别慢,由于该接口调用的是第三方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的更多相关文章

  1. vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输

    在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...

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

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

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

    最近遇到需求: 全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能 当拿到这个需求的时候我是拒绝的,因为我以及局部写好了0.0,这是要大改呀....,没办法老板的要求,只能硬着头皮 ...

  4. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  5. ajax请求加全局loading , 个别特殊请求不显示loading

    项目中,请求开始前加载loading遮罩层,请求结束关闭遮罩,一般都会加在全局中,但有个别请求不需要加全局loading 的话,这时候就需要对这些请求进行配置 全局加loading: ; functi ...

  6. AXIOS构建请求处理全局loading状态&&AXIOS避免重复请求loading多次出现

    一般情况下,在 vue 中结合 axios 的拦截器控制 loading 展示和关闭,是这样的:在 App.vue 配置一个全局 loading. <div class="app&qu ...

  7. 用Axios Element 实现全局的请求 loading

        Kapture 2018-06-07 at 14.57.40.gif demo in github 背景 业务需求是这样子的,每当发请求到后端时就触发一个全屏的 loading,多个请求合并为 ...

  8. vue和element全局loading

    http请求的代码如下: import axios from 'axios' import { Message} from 'element-ui' import store from '../sto ...

  9. vue全局loading组件

    本组件作用在页面加载完成前进行loader提示,提升用户体验,只需要在app.vue中引用一次,整个项目中路由切换时就可以自动进行提示(vuex版): 1. 添加vuex值和方法: import Vu ...

随机推荐

  1. GitHub标星125k!阿里技术官用3个月总结出的24万字Java面试笔记

    最近收到一位粉丝的回馈! 这位粉丝已经成功入职阿里了小编很是羡慕啊! 今天就把这份30w字Java面试笔记给大家分享出来,说来也巧这份资料也是由一位阿里技术官整理出来的这算不算是"搬起石头砸 ...

  2. PEP 324 subprocess 新的进程模块 -- Python官方文档译文 [原创]

    PEP 324 -- subprocess 新的进程模块(subprocess - New process module) 英文原文:https://www.python.org/dev/peps/p ...

  3. 最短路径问题,BFS,408方向,思路与实现分析

    最短路径问题,BFS,408方向,思路与实现分析 继上回挖下的坑,不知道大家有没有认真看最小生成树呢?很简单,这回也讲讲正常难度的,看不懂就来这里看看,讲的很好~~ 最短路径问题 说起这个问题,先说个 ...

  4. 深入解读Redis分布式锁

    之前码甲哥写了两篇有关线程安全的文章: 你管这叫线程安全? .NET八股文:线程同步技术解读 分布式锁是"线程同步"的延续 最近首度应用"分布式锁",现在想想, ...

  5. selenium 隐式等待与显式等待

    1.隐式等待:driver.implicitly_wait() driver = webdriver.Chrome()driver.implicitly_wait(10)     #获取元素时最多会等 ...

  6. Ckeditor 缺少图像源文件地址的解决 笨笨的人都看啦!

    Ckeditor 本文是关于CKEditor 无法上传图片问题的一个解决.我大致写了一下遇到问题的过程,问题的出处,怎么解决的,原因是什么. 希望能够帮到有需要的大家,有些时候找不到问题的答案,真的是 ...

  7. javascript中的设计模式

    什么是设计模式 设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结. 使用设计模式的目的:为了代码可重用性.让代码更容易被他人理解.保证代码可靠性. ...

  8. 【C++】共用体\联合体(union)

    共用体的用法与结构体差不多,只不过将关键字由struct变成了union.共用体使不同的类型变量存放到同一段内存单元中,所以共用体在同一时刻只能存储一个数据成员的值,共用体的大小等于最大成员的大小(结 ...

  9. 从1+1=2来理解Java字节码从1+1=2来理解Java字节码

    编译"1+1"代码 首先我们需要写个简单的小程序,1+1的程序,学习就要从最简单的1+1开始,代码如下: 写好java类文件后,首先执行命令javac TestJava.java ...

  10. 创建react项目并集成eslint/prettier/commit-lint

    创建 react 项目 npx create-react-app jira-new --template typescript 如果不想使用 TS,而要用 JS 的话,则删除 -template ty ...