uni-app:心跳机制基础逻辑(定时器方法解决)

思路

1、在登录的时候,定义一个存储当前时间的全局变量,并且开始心跳请求

2、在全局中定义一个定时器,该定时器每秒都会执行一次,并获取当前的时间

3、将定时器每秒的获取的当前时间和全局变量获取的时间进行比较

4、指定一个我需要执行心跳的间隔时间(这里举例:5s)

5、通过当前时间与全局变量中存储的时间进行比较,看是否等于5s,如果等于就执行心跳请求,并将全局变量的时间更改为当前时间

6、后面是考虑到有别的请求和心跳请求冲突的问题:如果有别的请求,我就需要在别的请求中开始时,刷新一下我全局变量中存储的时间(设置为当前时间),这样可以避免心跳请求正常执行导致和正常的请求发生冲突,但是需要给请求设置一个最大的请求时间,避免超时导致出现问题,见下连接

uni-app:如何配置uni.request请求的超时响应时间(全局+局部)_uni.request 超时-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/weixin_46001736/article/details/134435142?spm=1001.2014.3001.5501

目录

步骤

一、登录页面

1、在登录的时候,定义一个存储当前时间的全局变量,并且开始心跳请求(userlogin.vue)

代码
//全局变量中的数据 
uni.reLaunch({ //跳转到主页url: '/pages/mine/mine_index/mine_index?username=' + usernameinfo
})
setTimeout(function(){// 记录当前时间戳,存入时间戳getApp().globalData.refreshtime = Date.now();getApp().globalData.requesttime = Date.now();//成功登录开始心跳机制getApp().startHeartbeat();
},500)								
操作

1、全局变量refreshtime:记录与心跳时间进行比对的时间

2、全局变量requesttime:用于计算两次心跳的间隔时间

3、全局方法startHeartbeat(),用于启动心跳机制

二、全局页面App.vue

2、在全局中定义一个定时器,该定时器每秒都会执行一次,并获取当前的时间

3、将定时器每秒的获取的当前时间和全局变量获取的时间进行比较

4、指定一个我需要执行心跳的间隔时间(这里举例:5s)

5、通过当前时间与全局变量中存储的时间进行比较,看是否等于5s,如果等于就执行心跳请求,并将全局变量的时间更改为当前时间

代码
methods: {startHeartbeat() {console.log('开始心跳')this.heartbeatTimer = setInterval(() => {// console.log('存入的时间:',this.globalData.refreshtime)var nowtime = Date.now();// console.log('当前的时间:',nowtime)// 时间差var diffTime  =parseInt((nowtime-this.globalData.refreshtime)/1000)// console.log('时间差:',diffTime)//比较定义的心跳刷新时间5s和现在的时间差是否一致if(diffTime == 5){this.sendHeartbeatRequest();//发送心跳this.globalData.refreshtime = Date.now();}}, 1000); },sendHeartbeatRequest() {var old_requesttime = this.globalData.requesttimevar requesttime = Date.now();// 时间差var diffTime  =parseInt((requesttime-old_requesttime)/1000)console.log('两次请求的间隔差',diffTime);this.globalData.requesttime = requesttime;common.heart(this.globalData.access_token);}
},
globalData: {refreshtime:0,//刷新时间requesttime:0,//请求心跳时间	
}

三、心跳请求

代码
//心跳
function heart(access_token) {uni.request({url: ip + 'sys/token',data: {access_token: access_token},method: 'POST',dataType: 'json',header: {"content-type": "application/json"},success: res => {console.log("成功心跳", res)},fail(res) {console.log(res)}});
}
...//别的方法或变量
module.exports = {heart,...//别的方法名
}

四、请求别的方法

在请求方法之前设置全局变量的值为当前时间

getApp().globalData.refreshtime = Date.now(); //定义刷新时间为当前时间

例如

// 注销登录
function logout(cmd, access_token, usrname, passwd) {function requestWithRetry(cmd, usrname, passwd, access_token, retryCount) {return new Promise((resolve, reject) => {getApp().globalData.refreshtime = Date.now(); //定义刷新时间为当前时间uni.request({url: ip + 'sys/user/logout',data: {cmd: cmd, //随机生成的数access_token: access_token,usrname: usrname,passwd: passwd},method: 'POST',dataType: 'json',success(res) {console.log(`注销登录:第 ${retryCount} 次请求成功:`, res.data);resolve(res.data); // 返回成功的结果		},fail(res) {console.error(`注销登录:第 ${retryCount} 次请求失败,剩余重试次数 ${retryCount - 1}:`, res)if (retryCount <= 1) {// 重试次数已经用完,将错误信息返回给调用者reject(new Error('请求失败'))} else {// 还有重试次数,继续重试setTimeout(() => {requestWithRetry(cmd, usrname, passwd, access_token,retryCount - 1).then(resolve).catch(reject)}, 500)}}});});}// 调用方法,retryCount 为重试次数return requestWithRetry(cmd, usrname, passwd, access_token, 3).then(data => {// console.log('请求成功', data);return data;}).catch(error => {// console.log('请求失败', error);throw error;});
}

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

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

相关文章

网络运维与网络安全 学习笔记2023.11.27

网络运维与网络安全 学习笔记 第二十八天 今日目标 OSPF基本原理、OSPF单区域配置、OSPF多区域配置 特殊区域之Stub、特殊区域之NSSA OSPF基本原理 项目背景 随着企业的发展&#xff0c;网络的规模越来越大&#xff0c;网段的数量越来越多&#xff0c;公司内部的路由器的…

Windows系统下搭建PXE Server

在给一台服务器初始安装OS时一般有以下几种方式&#xff1a; 1、通过BMC挂载iso镜像来安装&#xff1b; 2、通过U盘启动来安装&#xff1b; 3、通过网络启动来安装&#xff1b; 方式1和方式2只能一台一台地进行&#xff0c;且需要有键盘和显示器&#xff0c;效率低下&#xff…

在vue页面中添加组件到底有多方便

修改vue写的前端页面到底有多方便&#xff1f;如果熟练的话&#xff0c;出乎你想象的快。 原来的页面&#xff1a;/admin/stock 原来的文件地址&#xff1a;src\views\admin\stock\Stock.vue 另一个页面有个入库功能&#xff0c;需要转移到上面的页面中&#xff1a; 路径&…

基于C#实现块状链表

在数据结构的世界里&#xff0c;我们会认识各种各样的数据结构&#xff0c;每一种数据结构都能解决相应领域的问题&#xff0c;当然每个数据结构&#xff0c;有他的优点&#xff0c;必然就有它的缺点&#xff0c;那么如何创造一种数据结构来将某两种数据结构进行扬长避短&#…

Java代码生成器,一键在线生成,支持自定义模板

【Java代码生成神器】自动化生成Java实体类、代码、增删改查功能&#xff01;点击访问 推荐一个自己每天都在用的Java代码生成器&#xff01;这个网站支持在线生成Java代码&#xff0c;包含完整的Controller\Service\Entity\Dao代码&#xff0c;完整的增删改查功能&#xff01…

金鸣表格文字识别客户端输出项该如何选择?

智能布局&#xff1a;根据提交的图片自动设置输出的打印纸张大小和方向&#xff0c;其中表格识别默认为A4纵向&#xff0c;勾选“合并”可将N张图片批量识别成一个文件、一个表。 表格识别&#xff1a; excel&#xff1a;输出可编辑的excel。 word&#xff1a;输出可编辑的w…

10G以太网接口的FPGA实现,你需要的都在这里

参考链接&#xff1a;10G以太网接口的FPGA实现&#xff0c;你需要的都在这里 - 知乎

机器人分类

从发展阶段分类&#xff1a; 1第一代机器人2第二代机器人3第三代机器人&#xff1a;智能型机器人。生于90年代。具有传感器&#xff0c;以前的机器人都不具有传感器 从控制方式分类&#xff1a;&#xff08;我觉得这个分类好乱&#xff09; 操作型机器人&#xff1a;可自动控…

机器学习的复习笔记1

机器学习是一种人工智能的分支&#xff0c;它通过让计算机从数据中学习规律和模式&#xff0c;从而实现对未知数据的预测和决策。根据不同的学习方法和任务&#xff0c;机器学习可以分为以下几种类型&#xff1a; 监督学习&#xff1a;在监督学习中&#xff0c;计算机会被提供一…

稳定扩散模型的隐空间探索

生成图像模型学习视觉世界的“潜在流形”&#xff1a;每个点映射到图像的低维向量空间。 从流形上的这样一个点回到可显示的图像称为“解码”—在稳定扩散模型中&#xff0c;这是由“解码器”模型处理的。 在线工具推荐&#xff1a; Three.js AI纹理开发包 - YOLO合成数据生成器…

为什么MES管理系统实施效果会很差

随着制造业的快速发展&#xff0c;MES生产管理系统越来越受到企业的关注。MES管理系统是一种面向车间生产的管理系统&#xff0c;用于在产品从工单发出到成品完工的过程中传递信息&#xff0c;以优化生产活动并提高操作及流程的效率。然而&#xff0c;很多公司在使用MES管理系统…

林业无人机如何提升巡山护林效率?

在郁郁森林之上&#xff0c;一架无人机正盘旋在上空时刻观察着林区的情况。凭借复亚智能的全自动巡检系统&#xff0c;无人机巡山护林的巡视范围和反馈实时性得到了显著提升。 一、林业无人机&#xff1a;科技赋能森林防火 秋季林区时常发生火灾&#xff0c;林业无人机在森林防…

WordPress最廉价优化整站的加载速度

为什么说一个站不优化就等于一个人做整个团队的事务导致项目进展慢&#xff0c;网站也是如此 图片、静态文件、php分离加速&#xff0c;加载速度并不是很快但是很协调比单个网站加载速度快许多 一、图片单域名加载设置上传文件路径和域名 以下代码添加在主题目录&#xff1a;fu…

后端接口返回二进制流音频数据,前端 js 如何播放?

一、接口设置 // 语音播放 export const getVoicePlay (content: string) > {return requestVoice({url: /tts/?text_prompt content,method: get,responseType: blob, // 返回类型blob}); };二、数据处理播放 getVoicePlay(item.content).then((res: any) > {consol…

C语言每日一题(37)两数相加

力扣网 2 两数相加 题目描述 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&a…

5.前端--CSS-基本概念【2023.11.26】

1. CSS 语法规范 CSS 规则由两个主要的部分构成&#xff1a;选择器以及一条或多条声明。 属性和属性值之间用英文“:”分开 多个“键值对”之间用英文“;”进行区分 选择器 : 简单来说&#xff0c;就是选择标签用的。 声明 &#xff1a;就是改变样式 2.CSS引入方式 按照 CSS 样…

Ansible的重用(include和import)

环境 管理节点&#xff1a;Ubuntu 22.04控制节点&#xff1a;CentOS 8Ansible&#xff1a;2.15.6 重用 Ansible提供四种可重用的工件&#xff1a; variable文件&#xff1a;只包含变量的文件task文件&#xff1a;只包含task的文件playbook&#xff1a;可包含play、变量、ta…

牛客 算法题 【HJ102 字符统计】 golang实现

题目 HJ102 字符统计 golang代码实现 package mainimport ("bufio""fmt""os""sort" )func main() {// str_arry :make([]string, 0)str_map : make(map[rune]int)result_map : make(map[int][]string)scanner : bufio.NewScanner(os…

基于C++实现水仙花数

1、水仙花数的连营 1.1、水仙花数 在学习程序设计课程时&#xff0c;大多数读者一定采用循环结构编写过求解水仙花数的程序。 【实例 1-1】水仙花数 一个三位整数&#xff08;100&#xff5e;999&#xff09;&#xff0c;若各位数的立方和等于该数自身&#xff0c;则称其为“…

SAP创建ODATA服务-Structure

SAP创建ODATA服务-Structure 1、创建数据字典 进入se11创建透明表ZRICO_USR,并创建对应字段 2、创建OData service 首先创建Gateway service project&#xff0c;事务码&#xff1a;SEGW&#xff0c;点击Create Project 按钮 Gateway service Project分四个部分&#xff1a…