定时器-前端使用定时器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.rhkb.cn/news/357840.html

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

相关文章

【C#】使用数字和时间方法ToString()格式化输出字符串显示

在C#编程项目开发中&#xff0c;几乎所有对象都有格式化字符串方法&#xff0c;其中常见的是数字和时间的格式化输出多少不一样&#xff0c;按实际需要而定吧&#xff0c;现记录如下&#xff0c;以后会用得上。 文章目录 数字格式化时间格式化 数字格式化 例如&#xff0c;保留…

WPF三方UI库全局应用MessageBox样式(.NET6版本)

一、问题场景 使用HandyControl简写HC 作为基础UI组件库时&#xff0c;希望系统中所有的MessageBox 样式都使用HC的MessageBox&#xff0c;常规操作如下&#xff1a; 在对应的xxxx.cs 顶部使用using 指定特定类的命名空间。 using MessageBox HandyControl.Controls.Message…

快去复习吧+++常用算法及参考算法 递推法++穷举法++排序(冒泡、选择)++查找(顺序、折半)++字符串处理++方程求根++无穷级数求和

接上&#xff1a;常用算法及参考算法 &#xff08;1&#xff09;累加 &#xff08;2&#xff09;累乘 &#xff08;3&#xff09;素数 &#xff08;4&#xff09;最大公约数 &#xff08;5&#xff09;最值问题 &#xff08;6&#xff09;迭代法 常用算法及参考算法 7. 递推法…

【LocalAI】(13):LocalAI最新版本支持Stable diffusion 3,20亿参数图像更加细腻了,可以继续研究下

最新版本v2.17.1 https://github.com/mudler/LocalAI/releases Stable diffusion 3 You can use Stable diffusion 3 by installing the model in the gallery (stable-diffusion-3-medium) or by placing this YAML file in the model folder: Stable Diffusion 3 Medium 正…

Git使用过程中涉及的几个区域

一. 简介 Git 是一个开源的分布式版本控制系统&#xff0c;可以有效、高速的处理从很小到非常大的项目版本管理&#xff0c;也是 Linus Torvalds 为了帮助管理 Linux内核开发而开发的一个开放源码的版本控制软件。 本文简单了解一下 git涉及的几个部分&#xff0c;以及git 常…

Django 模版过滤器

Django模版过滤器是一个非常有用的功能&#xff0c;它允许我们在模版中处理数据。过滤器看起来像这样&#xff1a;{{ name|lower }}&#xff0c;这将把变量name的值转换为小写。 1&#xff0c;创建应用 python manage.py startapp app5 2&#xff0c;注册应用 Test/Test/sett…

安卓中使用ttf字体文件

官方文档中提供的方法要设备能访问google&#xff1f; 官方方法 直接下载字体的fft文件 我要使用的是lexend 需要的格式可以在里面搜索 使用下载的ttf文件 解压出来 可以单独使用static里面的&#xff0c;里面是直接的lexend的各种格式 但是我这里直接使用Lexend-Vari…

IDEA Plugins中搜索不到插件解决办法

IDEA中搜不到插件有三种解决方案&#xff1a; 设置HTTP选项&#xff0c;可以通过File->Settings->Plugins->⚙->HTTP Proxy Settings进行设置 具体可参考这篇博文&#xff1a;IDEA Plugins中搜索不到插件解决办法本地安装&#xff0c;ile->Settings->Plugin…

【python】python股票量化交易策略分析可视化(源码+数据集+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

【Leetcode】520. 检测大写字母

文章目录 题目思路代码复杂度分析时间复杂度空间复杂度 结果总结 题目 题目链接&#x1f517;我们定义&#xff0c;在以下情况时&#xff0c;单词的大写用法是正确的&#xff1a; 全部字母都是大写&#xff0c;比如 “USA” 。单词中所有字母都不是大写&#xff0c;比如 “le…

【科普】半导体制造过程的步骤、技术、流程

在这篇文章中&#xff0c;我们将学习基本的半导体制造过程。为了将晶圆转化为半导体芯片&#xff0c;它需要经历一系列复杂的制造过程&#xff0c;包括氧化、光刻、刻蚀、沉积、离子注入、金属布线、电气检测和封装等。 基本的半导体制造过程 1.晶圆&#xff08;Wafer&#xf…

LabVIEW电池管理系统测试平台

随着混合动力汽车技术的快速发展&#xff0c;对电池管理系统&#xff08;BMS&#xff09;的测试需求显著增加。利用LabVIEW软件开发了一款电池管理系统测试平台&#xff0c;通过模拟电池行为验证BMS的控制策略&#xff0c;从而降低成本、缩短开发周期&#xff0c;并提高整车的能…

一五三、MAC 安装MongoDB可视化工具连接

若没有安装brew包管理工具&#xff0c;在命令行输入安装命令 /bin/bash -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)”上面步骤安装完成后&#xff0c;开始安装MongoDB&#xff0c;输入安装命令&#xff1a; brew tap mongodb/brewbrew u…

FFmpeg源码:ff_ctz / ff_ctz_c函数分析

一、ff_ctz函数的作用 ff_ctz定义在FFmpeg源码目录的libavutil/intmath.h 下&#xff1a; #ifndef ff_ctz #define ff_ctz ff_ctz_c /*** Trailing zero bit count.** param v input value. If v is 0, the result is undefined.* return the number of trailing 0-bits*/…

网络编程篇:HTTP协议

一.预备知识 在客户端访问服务端时&#xff0c;要用ipport&#xff0c;但是在日常用户访问服务端的时候&#xff0c;并不会直接使用ip&#xff0c;而是使用域名&#xff0c;比如&#xff1a;百度(www.baidu,com)。 …

图像数字化基础

一、像素 1、获取图像指定位置的像素 import cv2 image cv2.imread("E:\\images\\2.png") px image[291,218] print("坐标(291,218)上的像素的BGR值是&#xff1a;",px) &#xff08;1&#xff09;RGB色彩空间 R通道&#xff1a;红色通道 G通道&…

Altera的JTAG电路下载模块为何上下拉电阻,不可不知的秘密

一、FPGA背景信息 当前的FPGA市场上有国际和国产两大体系&#xff0c;国际排名&#xff0c;一直很稳定&#xff0c;国际上前三名Xilinx、Altera、Lattice&#xff0c;国内FPG厂商也在填补空白&#xff0c;低端、中低端市场上发力&#xff0c;替代潮流已在兴起&#xff0c;目前…

Chromium 开发指南2024 Mac篇-开始编译Chromium(五)

1.引言 在之前的指南中&#xff0c;我们已经详细介绍了在 macOS 上编译和开发 Chromium 的准备工作。您学会了如何安装和配置 Xcode&#xff0c;如何下载和配置 depot_tools&#xff0c;以及如何获取 Chromium 的源代码。通过这些步骤&#xff0c;您的开发环境已经搭建完毕&am…

MTANet: 多任务注意力网络,用于自动医学图像分割和分类| 文献速递-深度学习结合医疗影像疾病诊断与病灶分割

Title 题目 MTANet: Multi-Task Attention Network for Automatic Medical Image Segmentation and Classification MTANet: 多任务注意力网络&#xff0c;用于自动医学图像分割和分类 01 文献速递介绍 医学图像分割和分类是当前临床实践中的两个关键步骤&#xff0c;其准…