定时器-前端使用定时器3s轮询状态接口,2min为接口超时

背景

众所周知,后端是处理不了复杂的任务的,所以经过人家的技术讨论之后,把业务放在前端来实现。记录一下这次的离大谱需求吧。

如图所示,这个页面有5个列表,默认加载计划列表。但是由于后端的种种原因,这个列表接口不能直接调取。

要先调一个查询状态的接口,每 3s 轮询一次,如果返回的计划状态字段campaign为 true,才可以调列表page接口。

如果 30s 的时候还没为 true,表格的加载文案变成“数据量较大,拼命加载中,请耐心等待”。

如果2min的时候还没为 true,停止轮询,表格显示为“数据量较大,加载超时,请稍后”,提供一个重试按钮。

实现思路

首先定义一个全局变量-定时器。

在页面初始化的时候,加载loadData方法,如果定时器存在,清除定时器,防止污染。

定义一个方法lockData,在loadData函数中调用,这个方法的参数为一个异步函数的处理结果,这个异步函数就是查询状态,如果返回的计划状态为真,则调取列表接口,return false,否则return 接口的响应结果(一个对象)

在lockData方法中,定义一个秒数参数curTime,再定义清除定时器的方法。如果定时器不存在,先接收参数,看看查询结果是什么。如果这个参数为 false ,说明之前查询状态的结果是真已经直接调page接口了,此时直接return,结束方法。否则,开启定时器,秒数自增,如果秒数能整除3,且参数存在,调取参数,拿到返回结果,如果结果为 false,则清除定时器。如果curTime 大于200,清除定时器,让表格显示超时样式。

代码如下:

async lockData(func) {let curTime = 0const clearI = () => {clearInterval(Interval)Interval = nullcurTime = 0this.loadingText = ''this.loading = false}if (!Interval) {this.loading = truelet isClear = await func()if (!isClear) returnInterval = setInterval(async () => {curTime++if (curTime >= 30) {this.loadingText = '数据量较大,拼命加载中,请耐心等待'}if (curTime % 3 === 0) {if (func) {let isClear = await func()console.log('lockData', { curTime, isClear })if (!isClear) clearI()}}if (curTime >= 120) {clearI()this.tableData = []this.timeOutEmpty = true}}, 1000)this.$once('hook:beforeDestroy', () => {clearInterval(Interval)})}
},
async loadData() {if(Interval) {clearInterval(Interval)Interval = null}this.timeOutEmpty = falsethis.lockData(async () => {let response = await this.dataSync()return response})
},
async dataSync() {this.loading = truelet response = await this.$axios.post('/xxxxx/baseToday', {xxxx})if (response.data.status === 0 && response.data.data['campaign']) {await this.getData()return false}return response
},
async getData() {this.loading = truelet response = await this.$axios.post('/xxxx/page', {xxxx})if (response.data.status === 0) {this.tableData = response.data.listthis.total = response.data.totalCountthis.$emit('changeTotal', {key: 'campaignNum',value: this.total})}this.loading = false
}
<div slot="empty"><div v-if="timeOutEmpty"><span>数据量较大,加载超时,请稍后<el-button @click="loadData" type="text">重试</el-button></span></div><span v-else>暂无数据</span>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/31223.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ | Leetcode C++题解之第171题Excel表列序号

题目&#xff1a; 题解&#xff1a; class Solution { public:int titleToNumber(string columnTitle) {int number 0;long multiple 1;for (int i columnTitle.size() - 1; i > 0; i--) {int k columnTitle[i] - A 1;number k * multiple;multiple * 26;}return num…

QT中利用QMovie实现动态加载效果

1、效果 2、代码 #include "widget.h" #include "ui_widget.h" #include <QLabel> #include <QMovie>

YOLOv10训练自己的数据集(图像目标检测)

目录 1、下载代码 2、环境配置 3、准备数据集 4、yolov10训练 可能会出现报错&#xff1a; 1、下载代码 源码地址&#xff1a;https://github.com/THU-MIG/yolov10 2、环境配置 打开源代码&#xff0c;在Terminal中&#xff0c;使用conda 创建虚拟环境配置 命令如下&a…

Python基础教程(二十五):内置函数整理

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

将AI带入企业,红帽选择了开源

伴随着生成式AI与大模型技术的飞速发展&#xff0c;业界人士对于生成式AI应用在企业的落地也愈发关注。 近日在2024红帽媒体Open讲上&#xff0c;红帽全球副总裁兼大中华区总裁曹衡康深入剖析了AI在混合云中的应用及其带来的资源利用最大化优势&#xff0c;并同与会媒体共同探讨…

Redis-数据类型-List

文章目录 1、通过客户端连接redis2、切换到第二个数据库 db13、查看当前库所有key4、从左边插入一个或多个值5、按照索引下标获得元素(从左到右)6、针对key指定的list&#xff0c;从右边放入元素7、返回list集合的长度8、从左边弹出一个元素。弹出返回删除9、从右边弹出一个元素…

《米小圈动画汉字》汉字教育动画化:传统与创新的完美融合!

汉字&#xff0c;作为中华文化的瑰宝&#xff0c;承载着千百年来中华民族的智慧和思想。每一个汉字不仅仅是一个符号&#xff0c;更是一段历史的见证&#xff0c;一种文化的传承。在当今全球化的背景下&#xff0c;汉字教育面临着新的挑战与机遇。在这种背景下&#xff0c;如何…

关于如何得到Mindspore lite所需要的.ms模型

关于如何得到Mindspore lite所需要的.ms模型 一、.ckpt模型文件转.mindir模型二、.mindir模型转.ms模型三、其它3.1 代码3.2 数据 四、参考文档 一、.ckpt模型文件转.mindir模型 由于要得到ms模型&#xff0c;mindspore的所有模型里面&#xff0c;是必须要用mindir模型才可以进…

STM32C8T6与TB6612

好久没写博客了&#xff0c;今天水一篇 接线

【Unity设计模式】状态编程模式

前言 最近在学习Unity游戏设计模式&#xff0c;看到两本比较适合入门的书&#xff0c;一本是unity官方的 《Level up your programming with game programming patterns》 ,另一本是 《游戏编程模式》 这两本书介绍了大部分会使用到的设计模式&#xff0c;因此很值得学习 本…

豆瓣电影top250网页爬虫

设计思路 选择技术栈:确定使用Python及其相关库&#xff0c;如requests用于发送网络请求&#xff0c;获取网址&#xff0c;用re(正则表达式)或BeautifulSoup用于页面内容解析。设计流程:规划爬虫的基本流程&#xff0c;包括发起请求、接受响应、解析内容、存储数据等环节。模块…

小程序中用font-spider压缩字体后,字体没效果(解决办法)

因为项目中需要引入外部字体&#xff0c;有两种方案&#xff0c; 第一是把字体下载到本地&#xff0c; 第二种是cdn请求服务器放字体的地址 但是小程序是有大小限制的&#xff0c;所以必须要压缩字体大小&#xff0c;这时候有些人就说了&#xff0c;那把字体放在服务器上&a…

【人工智能】—基于K-Means算法商场顾客聚类实战教程

在这篇博文之前一直是给大家做机器学习有监督学习教程&#xff0c;今天来一篇无监督学习教程。 K-Means算法是一种基于中心的聚类方法&#xff0c;它试图找到数据点的K个簇&#xff0c;使得簇内的数据点尽可能相似&#xff0c;而簇间的数据点尽可能不同。下面是K-Means算法的详…

Spring Boot集成tablesaw插件快速入门

1 什么是tablesaw&#xff1f; Tablesaw是一款Java的数据可视化库&#xff0c;主要包括两部分&#xff1a; 数据解析库&#xff0c;主要用于加载数据&#xff0c;对数据进行操作(转化&#xff0c;过滤&#xff0c;汇总等)&#xff0c;类比Python中的Pandas库&#xff1b; 数据…

苹果cms10影视网整站源码下载/苹果cms模板MXone Pro自适应影视电影网站模板

下载地址&#xff1a;苹果cms10影视网整站源码下载/苹果cms模板MXone Pro自适应影视电影网站模板 模板带有夜间模式、白天晚上自动切换&#xff0c;有观影记录、后台设置页。全新UI全新框架&#xff0c;加载响应速度更快&#xff0c;seo更好&#xff0c;去除多余页面优化代码。…

从零开始搭建创业公司全新技术栈解决方案

从零开始搭建创业公司全新技术栈解决方案 关于猫头虎 大家好&#xff0c;我是猫头虎&#xff0c;别名猫头虎博主&#xff0c;擅长的技术领域包括云原生、前端、后端、运维和AI。我的博客主要分享技术教程、bug解决思路、开发工具教程、前沿科技资讯、产品评测图文、产品使用体…

Ollma本地大模型沉浸式翻译【403报错解决】

最终效果 通过Chrome的 沉浸式翻译 插件&#xff0c;用OpenAI通用接口调用本地的Ollma上的模型&#xff0c;实现本地的大模型翻译文献。 官方文档指导的Ollama的配置&#xff1a;一定要配置环境变量&#xff0c;否则会出现【403报错】

GoogLeNet(InceptionV3)模型算法

GoogLeNet 团队在给出了一些通用的网络设计准则&#xff0c;以期望在不提高网络参数 量的前提下提升网络的表达能力&#xff1a; 避免特征图 (feature map) 表达瓶颈&#xff1a;从理论上讲&#xff0c;尺寸 (seize) 才包含了相关结构等重要因素&#xff0c;维度(channel) 仅仅…

torch.optim 之 Algorithms (Implementation: for-loop, foreach, fused)

torch.optim的官方文档 官方文档中文版 一、Implementation torch.optim的官方文档在介绍一些optimizer Algorithms时提及它们的implementation共有如下三个类别&#xff1a;for-loop, foreach (multi-tensor), and fused。 Chat-GPT对这三个implementation的解释是&#xf…

账号和权限的管理

文章目录 管理用户账号和组账号用户账号的分类超级用户普通用户程序用户 UID&#xff08;用户id)和(组账号)GIDUID用户识别号GID组标识号 用户账号文件添加用户账号设置/更改用户口令 管理用户账号和组账号 用户账号的分类 超级用户 root 用户是 Linux 操作系统中默认的超级…