Continuous polling to backend is stalling (vuejs)

Question

I have a Vue component that conditionally renders other components depending on the GET response. When boiled down it looks something like:

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() fires an initial get request which tells the backend to look something up and, if that something doesn't exist, to write it to the database and return a database aggregation. this can take upwards of ~10 minutes due to rate limits.

Because the first this.lookup() can take time, I want to allow users to see the progress of their request via polling - every 15 seconds fire the same method using setInterval(). The backend is designed such that if the original request is being written to the database, it will return an object that looks like:

{
   active: true,
   current: 38,
   queue: 748
}

The problem is that each request fired via setInterval() pends for ~20 seconds and I'm not sure why because typical responses to the server take ~500ms from start-to-finish. I would like to remove this 20 second stall.

Answer 1

Turns out it wasn't a conflict with any of my code but an issue with Chrome.

ref: Chrome stalls when making multiple requests to same resource?

fix: adding arbitrary params to the query string resolves the stalling issue.

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

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