vue项目每30秒刷新1次接口获取数据

在vue.js项目中，我们经常会需要实现轮询，即对数据实时更新的这种需求：每隔xx秒需要刷新一次接口刷新数据。如：每隔30秒请求一次数据

这时候我们就需要用到定时器相关的原理。

我们可以先看看2种常用定时器：

setinterval(function(){}, seconds)——隔seconds调用一次函数

settimeout(function(){}, seconds)——只执行函数一次

这么看的话，setinterval会符合我们的业务需求。然而这里也会有些问题：

如果你单纯的使用setinterval的话，会导致页面卡死！

其原因与js引擎线程有关，简单来说就是setinterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死网页。

但是settimeout是自带清除定时器的，因此正确解决方法如下：

window.setInterval(() => {

setTimeout(fun, 0)

}, 30000)

// 这里的30000为多少秒刷新的时间

注意：setinterval必须放在外层（在内层会导致页面卡顿直到崩溃），内层配合settimeout（主要是setTimeout是自带清除定时器），即可无限次调用我们的接口啦！

vue项目每30秒刷新1次接口获取数据相关推荐

vue 30秒刷新一次接口
在vue.js项目中,经常需要对数据实时更新--每隔xx秒需要刷新一次接口--即需要用到定时器相关原理我们先看一看2种常用定时器: setInterval(function(){}, millise ...
[vue-cli]在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？
[vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗? 自动刷新页面并不是vue-cli的功能,而是webpack的hot-module-replacement-plug ...
vue项目中解决浏览器刷新vuex数据消失问题
vue项目中解决浏览器刷新vuex数据消失问题说明 vuex中的数据经过浏览器刷新后会消失,所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中. 操作打开App.vue,在created ...
VUE项目部署Tomcat页面刷新404问题解决方法
问题描述 vue项目在本地开发环境运行正常,打包部署至线上Tomcat服务后,不刷新浏览器时工作正常,一刷新浏览器就报404错误,错误截图如下: 错误描述:404,源服务器未能找到目标资源的表示或者是 ...
XX健康:移动端开发-体检预约验证码30秒倒计时短信验证码获取与验证DatePicker日历展示提交预约复杂流程阿里短信工具类
1. 体检预约流程用户可以通过如下操作流程进行体检预约: 在移动端首页点击体检预约,页面跳转到套餐列表页面在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面在套餐详情页面点击立即预约,页面跳 ...
用Excel，只需30秒就可爬取网站数据
是的,你没看错,就是用Excel爬数据.那么为什么要用它呢?因为它不需要写一行代码,只需要轻轻点几下鼠标,就可以得到你想要的数据,全程30秒左右就能搞定,在网站结构简单,需求比较简单的情况下,你只此一 ...
前端项目——实现qq音乐网页版本（样式+获取数据+播放）
这是一个完整的项目实现,内容包括网页排版,利用js css实现一些动态特效,特在此记录项目实现过程中的核心思想,以及难点的解决方法和在此项目中学到的新知识. 首先看一下该项目的官网效果可以看到该网页 ...
vue项目添加水印，防止刷新页面水印消失
引入一个waterMark.js文件之后 IE各种问题问题1:页面出现空白,登录页面都没有显示出来问题2:IE低版本(11以下)总是报语法错误问题1出现的原因是js文件包含箭头函数问题2出现的 ...
【转】】Vue项目部署tomcat，刷新报错404解决办法
转自[https://blog.csdn.net/g631521612/article/details/82835518] 解决方式: - 在tocmat的webapps下的项目中创建WEB-INF文 ...

vue项目每30秒刷新1次接口获取数据

vue项目每30秒刷新1次接口获取数据相关推荐

最新文章

热门文章