Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to realize the vue polling request. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Understanding of polling

In fact, the focus of polling is on how often it is executed, not on the loop itself. Ajax is an asynchronous request, which is a complete process from initiating the request to receiving the response. The time required for this process is unpredictable. To the extreme, if the time required for the request exceeds the interval time between our polls, there will be a lot of problems, so the polling interval should be based on ensuring the completion of the request process, which is more logical.

Business description:

The page initializes the display of the first page of data, and then refreshes the current page every ten seconds

Change the filter criteria or change the page number to refresh the data directly, and then refresh the data every ten seconds.

Business logic point analysis:

When invoked manually, the request for initiation is executed immediately

Then execute every ten seconds to refresh the list

Realization idea

Directly invoke the request first

Set timer setTimeout in the successful callback function of the request

Repeat the 1.2 operation within the timer

Encapsulate step 1.2.3 as 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 perfectly in line with the concept of polling. If our operation is to synchronize the code, there is no problem with using setInterval. The problem is that setInterval is not flexible enough to know whether the last request has been completed. So setTimeout would be better.

What you need to pay attention to.

In the poll, I recorded the timer with the pollingST variable. The last timer must be cleared before each execution, because the recursive call is inside the timer, so it is convenient to end the poll by clearing the timer.

Complete pseudo code

Export default {data () {return {pollingST: null}}, methods: {/ / paging change event pageChange (params) {/ / clear 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)}} above is all the content of the article "how to implement a vue polling request" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.