axios 对后端的持续轮询正在停止(vuejs)

qvk1mo1f  于 2023-10-18  发布在  iOS
关注(0)|答案(1)|浏览(117)

我有一个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秒的摊位移走。

q1qsirdb

q1qsirdb1#

原来这不是与我的任何代码冲突,而是Chrome的问题。
ref:Chrome在向同一资源发出多个请求时会停止运行?
修复:添加任意参数到查询字符串解决了停滞问题。

// Increment this.unique on each setInterval() call (0, 1, 2, 3...)

axios.get(url, {
  params: {
    rand: this.unique
  }
})
.then(...)

相关问题