多个请求下 loading 的展示与关闭
时间:2022-07-25
本文章向大家介绍多个请求下 loading 的展示与关闭,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一般情况下,在 vue 中结合 axios 的拦截器控制 loading 展示和关闭,是这样的:
在 App.vue
配置一个全局 loading。
<div class="app">
<keep-alive :include="keepAliveData">
<router-view/>
</keep-alive>
<div class="loading" v-show="isShowLoading">
<Spin size="large"></Spin>
</div>
</div>
同时设置 axios 拦截器。
// 添加请求拦截器
this.$axios.interceptors.request.use(config => {
this.isShowLoading = true
return config
}, error => {
this.isShowLoading = false
return Promise.reject(error)
})
// 添加响应拦截器
this.$axios.interceptors.response.use(response => {
this.isShowLoading = false
return response
}, error => {
this.isShowLoading = false
return Promise.reject(error)
})
这个拦截器的功能是在请求前打开 loading,请求结束或出错时关闭 loading。 如果每次只有一个请求,这样运行是没问题的。但同时有多个请求并发,就会有问题了。
举例:
假如现在同时发起两个请求,在请求前,拦截器 this.isShowLoading = true
将 loading 打开。
现在有一个请求结束了。this.isShowLoading = false
拦截器关闭 loading,但是另一个请求由于某些原因并没有结束。
造成的后果就是页面请求还没完成,loading 却关闭了,用户会以为页面加载完成了,结果页面不能正常运行,导致用户体验不好。
解决方案
增加一个 loadingCount
变量,用来计算请求的次数。
loadingCount: 0
再增加两个方法,来对 loadingCount
进行增减操作。
methods: {
addLoading() {
this.isShowLoading = true
this.loadingCount++
},
isCloseLoading() {
this.loadingCount--
if (this.loadingCount == 0) {
this.isShowLoading = false
}
}
}
现在拦截器变成这样:
// 添加请求拦截器
this.$axios.interceptors.request.use(config => {
this.addLoading()
return config
}, error => {
this.isShowLoading = false
this.loadingCount = 0
this.$Message.error('网络异常,请稍后再试')
return Promise.reject(error)
})
// 添加响应拦截器
this.$axios.interceptors.response.use(response => {
this.isCloseLoading()
return response
}, error => {
this.isShowLoading = false
this.loadingCount = 0
this.$Message.error('网络异常,请稍后再试')
return Promise.reject(error)
})
这个拦截器的功能是:
每当发起一个请求,打开 loading,同时 loadingCount
加1。
每当一个请求结束, loadingCount
减1,并判断 loadingCount
是否为 0,如果为 0,则关闭 loading。
这样即可解决,多个请求下有某个请求提前结束,导致 loading 关闭的问题。
- 2015编程之美(资格赛)--基站选址
- CentOS7下Nginx服务器安装与使用教程
- 2015年编程之美(资格赛) ---2月29日
- 编程之美--2. Trie树 (Trie图)
- 编程之美 --1 : 骨牌覆盖问题·一
- go语言中的数组切片:特立独行的可变数组
- go语言单例模式(Singleton)实例分析
- C++ template的一些高级用法(元编码,可变参数,仿函数,using使用方法,. C++ 智能指针)
- Golang memory model
- go的非侵入式接口
- C++ 如何重复利用一个内存地址块
- 如何减轻挖矿攻击给企业安全带来的威胁
- C++ 高级语法学习与总结(代码实例)
- golang使用原始套接字构造UDP包
- 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 数组属性和方法
- SpringMVC:基本应用
- SpringMVC:进阶
- SpringMVC:SSM 整合
- 12 | Tornado源码分析:BaseIOStream 对象(上)
- 数据一致性校验及数据同步,运维必看
- Windows使用scoop包管理器安装RabbitMQ
- 深入理解web协议(二):DNS、WebSocket
- Elasticsearch:使用 function_score 及 soft_score 定制搜索结果的分数
- Elasticsearch:基于 Vector 的打分
- RocketMQ的发送模式和消费模式
- 实现一个简单的JS效果
- 1000000 / 60S 的 RocketMQ 不停机,扩容,平滑升级!
- Mysql支持远程链接访问
- linux shell编程
- Linux下的I/O复用与epoll详解