- 需求
在管理系统中实现前端每隔5秒调用后端的轮询接口,进行轮询。
- 实现
this.timer=window.setInterval(() => {
setTimeout(() => {
api.setControlResult(id).then((res) => {
if (res.data.code == '500') {
this.$msgByResponse(res.data);
clearInterval(this.timer);
}
}
}, 1)
}, 5000)
api.setControlResult()是调用后端轮询接口,id是传入的参数。 在轮询中判断,当code返回500时可以结束轮询并弹出提示信息。
同时,在页面销毁时也要结束轮询(也就是跳转页面结束轮询),写在生命周期函数destroyed中:
destroyed() {
clearInterval(this.timer);
}
这么写可以实现基本功能,但当同时开启两个及以上的轮询,就会无法判断该关闭哪个轮询。
- 进阶版实现
let timerArr=[];
let data = {
timer: window.setInterval(() => {
setTimeout(() => {
this.createSetInterval(id);
}, 1)
}, 5000),
value: id
};
timerArr.push(data);
创建一个数组timerArr,用来存放每个轮询及它的唯一标识id。data{ }由轮询和唯一标识id组成。每当开启一个轮询时,就把这个轮询及它的id组成的data{ }push进timerArr中。createSetInterva()是封装好的调用后端轮询接口的方法。
createSetInterval(id) {
api.setControlResult(id).then((res) => {
if (res.data.code == '500' ) {
for (var i = 0; i < timerArr.length; i++) {
if (timerArr[i].value == id) {
window.clearInterval(timerArr[i].timer);
this.$msgByResponse(res.data);
timerArr.splice(i, 1);
break
}
}
return
}
})
},
那么如何停止轮询呢?
当code返回500时,遍历整个timerArr数组,找到唯一标识id相同的那一个轮询,停掉它,并将这一项从timerArr中删除。
当然,当页面销毁时,也要停掉所有轮询:
destroyed() {
for (var i = 0; i < timerArr.length; i++) {
clearInterval(timerArr[i].timer);
}
},
这样的实现方式有没有问题还需要大佬们指正~~