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是自带清除定时器），即可无限次调用我们的接口啦！