我有一个Vue组件,它根据GET响应有条件地呈现其他组件。当它被分解时,它看起来像这样:
data() {
return {
responseStatus: null, // Variable that conditionally renders components
response: null,
poll: null
}
},
created() {
this.lookup()
this.poll = setInterval(() => {
this.lookup()
}, 15000)
},
methods: {
lookup() {
axios.get(`...`)
.then((res) => {
this.response = res.data
console.log(this.response, 'response')
if (this.response.active) {
this.responseStatus = 0
} else {
this.responseStatus = 1
clearInterval(this.poll)
}
})
.catch((e) => {
clearInterval(this.poll)
console.log(e)
this.responseStatus = 2
})
},
}
this.lookup()
触发一个初始get请求,它告诉后端查找某些内容,如果该内容不存在,则将其写入数据库并返回数据库聚合。由于速率限制,这可能需要大约10分钟以上。
因为第一个this.lookup()
可能需要时间,所以我希望允许用户通过轮询来查看他们的请求的进度-每15秒使用setInterval()
触发一次相同的方法。后端的设计是这样的,如果原始请求被写入数据库,它将返回一个看起来像这样的对象:
{
active: true,
current: 38,
queue: 748
}
问题是,通过setInterval()
发出的每个请求都要等待大约20秒,我不知道为什么,因为对服务器的典型响应从开始到结束需要大约500毫秒。我想把这个20秒的摊位移走。
1条答案
按热度按时间q1qsirdb1#
原来这不是与我的任何代码冲突,而是Chrome的问题。
ref:Chrome在向同一资源发出多个请求时会停止运行?
修复:添加任意参数到查询字符串解决了停滞问题。