vue.js: куда ставить регулярно повторяющийся фоновый запрос

Question

Я хотел бы запрашивать службу API каждые 15 секунд, чтобы я мог получать данные из базы данных и проверять, было ли что-то изменено.Если бы произошло изменение, то мой интерфейс обновлялся бы автоматически из-за того, как работает vue.

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

Мои вопросы:

1. Это хороший подход для решения такой проблемы?проблема вообще?
2. Какая позиция в коде лучше всего подходит для размещения такого цикла?

РЕДАКТИРОВАТЬ:

Использование setInterval() кажется правильным, но использование функции опроса с setInterval в хуке созданного () вообще не влияет на таблицу данных.Он показывает «Нет доступных данных»:

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

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

Использование функции опроса без setInterval работает и заполняет мою таблицу данных данными, как обычно:

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

Answer 1

Для простого и быстрого решения я бы выбрал I'mOnlyVueman's answer .Вот пример кода, который я нашел из опроса Vue.js, используя setINterval () .Этот пример включает

• pollData метод, инициированный в created, который отправляет действие хранилища (которое вызвало бы API)
• Отмена опроса при переходе на другую страницу с помощью beforeDestroy

Код

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

Но опрос API не очень элегантен и плохо масштабируется.Скорее всего, вам понадобится что-то сделать с Websockets, настроив ваше приложение для прослушивания событий, передаваемых из вашего API.

Вот информация о Подписках в Vue-Apollo & GraphQL , о которых упоминал Денис Цой.

Подписки - это функция GraphQL, которая позволяет серверу отправлять данные клиентам, когда в бэкэнде происходит определенное событие.Подписки обычно реализуются с помощью WebSockets, где сервер поддерживает постоянное соединение с клиентом.То есть цикл запроса-ответа, который мы использовали для всех предыдущих взаимодействий с API, не используется для подписок.Вместо этого клиент первоначально устанавливает постоянное соединение с сервером, указывая, какое событие ему интересно. Каждый раз, когда происходит это конкретное событие, сервер использует соединение для передачи данных, связанных с событием, клиенту.

Answer 2

Такой цикл будет идти в скрипте компонента в mounted () ловушке жизненного цикла.

Это будет означать, что как только компонент загрузится, ваш цикл сработает.Для подробного руководства по этой технике Vue Docs - хорошая первая остановка, а также эта статья .