javascript - vue.js: Where to put regularly repeating background query - Stack Overflow

admin管理员组

文章数量:1333710

I would like to query an API service every 15 seconds, so I can get data from a database and check whether something was changed. If there was a change, then my front end would update automatically because of how vue works.

while (true) {
    setTimeout(function() { 
        QueryService.orders().then(response => 
            this.orders = response.data
        )
    }, 15000)
}

My questions are:

1. Is this a good approach to solve such a problem at all?
2. What would be the best position in the code to place such a loop?

EDIT:

Using setInterval() seems to be the right way, but using a polling function with setInterval in the created() hook doesn't affect the data-table at all. It shows me "No data available":

data () {
    return {
        headers [
            { ... },
            { ... }
        ],
        orders: []
}

created () {
    setInterval(function() { 
        QueryService.orders().then(response => this.orders = response.data)
    }, 15000)
}

Using the polling function without setInterval works and fills my data-table with data as usual:

created () {
    QueryService.orders().then(response => this.orders = response.data)
}

I would like to query an API service every 15 seconds, so I can get data from a database and check whether something was changed. If there was a change, then my front end would update automatically because of how vue works.

while (true) {
    setTimeout(function() { 
        QueryService.orders().then(response => 
            this.orders = response.data
        )
    }, 15000)
}

My questions are:

1. Is this a good approach to solve such a problem at all?
2. What would be the best position in the code to place such a loop?

EDIT:

Using setInterval() seems to be the right way, but using a polling function with setInterval in the created() hook doesn't affect the data-table at all. It shows me "No data available":

data () {
    return {
        headers [
            { ... },
            { ... }
        ],
        orders: []
}

created () {
    setInterval(function() { 
        QueryService.orders().then(response => this.orders = response.data)
    }, 15000)
}

Using the polling function without setInterval works and fills my data-table with data as usual:

created () {
    QueryService.orders().then(response => this.orders = response.data)
}

• javascript
• vue.js
• background-process

Share Improve this question Follow edited Jul 7, 2022 at 13:51 snoob dogg 2,88544 gold badges3636 silver badges6565 bronze badges asked Feb 19, 2019 at 12:37 sunwarr10rsunwarr10r 4,79799 gold badges6464 silver badges119119 bronze badges 2

• 1 suggest use subscriptions instead of polling – Denis Tsoi Commented Feb 19, 2019 at 12:39
• @DenisTsoi Do you have an example? – sunwarr10r Commented Feb 19, 2019 at 13:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

For a simple and quick solution, I'd go with I'mOnlyVueman's answer. Here some example code I found from Vue.js polling using setINterval(). This example includes

• pollData method initiated on created that dispatches a store action (which would call the API)
• Canceling the poll as you navigate to another page using beforeDestroy

Code

data () {
    return {
        polling: null
    }
},
methods: {
    pollData () {
        this.polling = setInterval(() => {
            this.$store.dispatch('RETRIEVE_DATA_FROM_BACKEND')
        }, 3000)
    }
},
beforeDestroy () {
    clearInterval(this.polling)
},
created () {
    this.pollData()
}

But polling an API isn't very elegant and it doesn't scale well. You'll likely need to do something with Websockets, setting up your app to listen for events pushed from your API.

Here's info on Subscriptions in Vue-Apollo & GraphQL that Denis Tsoi mentioned.

Subscriptions are a GraphQL feature that allows the server to send data to the clients when a specific event happens on the backend. Subscriptions are usually implemented with WebSockets, where the server holds a steady connection to the client. That is, the Request-Response-Cycle that we used for all previous interactions with the API is not used for subscriptions. Instead, the client initially opens up a steady connection to the server by specifying which event it is interested in. Every time this particular event happens, the server uses the connection to push the data that’s related to the event to the client.

A loop like this would go in the ponent's script within a mounted () lifecycle hook.

That would mean once the ponent loads your loop would trigger. For detailed guidance on this technique the Vue docs are a good first stop, as well as this article.

本文标签： javascriptvuejs Where to put regularly repeating background queryStack Overflow