咨询电话:
15628812133
11
2025/07

VUE中重要的定时器写法--轮询

发布时间:2025-07-11 16:03:14
发布者:dzw
浏览量:
0

最近修改的项目中,有一个ai的内容,大致就是传递id给后端,前端不断地询问这个接口直到返回正确的结果的过程。这个过程中就会使用到定时器setTimeout。

在vue中写定时器,一定要放到date里,使用thisxxx把setTimeout赋值给某个全局变量,为什么需要这样做,我们后面说。

为了方便和节省浏览器性能,首先需要设置最大轮询次数和轮询时间,直接var即可。

image

然后我们创建一个简单的箭头函数(也是为了确保能访问到this),箭头函数中每次访问都需要使一个变量增加,然后判断是否大于设定的轮询最大次数,大于则return掉。

image

接下来是一个请求,我们要根据后端设置的内容,判断是否满足我们的要求。大家可以看一下我下边的判断,首先判断接口是否是正常通信的,如果是200,则会返回res,如果是错误,则会返回err并弹出错误原因并停止定时器。如果返回res后,后端的状态返回2000并且状态为completed完成则把ai返回的内容赋值,并且清除定时器,如果不是2000,则判断是否有报错,没有报错则继续轮询。这里最重要的点就是重新给this.pollTimer赋值,重新赋值后,根据我们设定的轮询间隔时间,时间到达后会再次请求我们设置的箭头函数,直到状态为completed为止。

image

我们之前说的,为什么一定要把定时器赋值给变量,因为定时器一定要清除,不光是在本页面清除,当该路由页面卸载的时候,也需要清除,避免跳转到其他页面后,这个定时器还一直请求接口。

image

了解更多vue知识点击这里。

上一篇: vant自定义滑块加顶部加气泡
下一篇: 没有了
关键词:
返回列表