Complete example of vue polling request solution

Understanding of polling

In fact, the focus of polling is on the interval between executions, not the loop itself. Ajax is an asynchronous request, from initiating the request to receiving the response is a complete process. The time required for this process is unpredictable. To put it in an extreme point, if the time required for the request exceeds our polling interval, many problems will arise. Therefore, the polling interval should be based on ensuring that the request process is completed, which is more logical.

Business Description:

1. The page is initialized to display the first page of data, and then the current page data is refreshed every ten seconds
2. Change the filter conditions or change the page number to refresh the data directly, and then refresh the current data every ten seconds

Business logic point analysis:

1. When manually called, the request is executed immediately
2. Then execute it every ten seconds to refresh the list

Implementation ideas

1. Call the request directly
2. Set the timer setTimeout in the successful callback function of the request
3. Repeat 1.2 steps within the timer.
4. Encapsulate steps 1.2.3 into a recursive function

// Polling method polling (page) {
      this.getWorks(page).then(res => {
        this.pollingST = setTimeout(() => {
          clearTimeout(this.pollingST)
          this.polling(page)
        }, 10000)
      })
    }

Why not use setInterval

The function of setInterval seems to be a perfect match for the concept of polling. If our operation is synchronous code, then there is no problem in using setInterval. The problem is that setInterval is not flexible enough and we cannot know whether the last request has been completed. So setTimeout would be better.

Things to note

In the polling, I recorded the timer with the pollingST variable. The previous timer must be cleared before each execution. Because the recursive call is inside the timer, it is very convenient to end the polling by clearing the timer.

Complete pseudo code

<script>
export default {
  data () {
    return {
      pollingST: null
    }
  },
  methods: {
    // Paging change event pageChange (params) {
      // Clear the existing timer clearTimeout(this.pollingST)
      //Call polling this.polling(params)
    },
    // Request interface method getWorks() {
      return new Promise(resolve => resolve({}))
    },
    // Polling method polling (params) {
      this.getWorks(params).then(res => {
        this.pollingST = setTimeout(() => {
          clearTimeout(this.pollingST)
          this.polling(params)
        }, 10000)
      })
    }
  },
  created () {
    // Call polling this.polling({ page: 1, pageSize: 5 })
  },
  destroyed () {
    clearTimeout(this.pollingST)
  }
}
</script>

Summarize

This is the end of this article about the vue polling solution. For more relevant vue polling solutions, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!