повторно вызывать axios.get для отображения данных с конечной точки

Question

Я работаю над бэкэндом, написанным во флаке, который возвращает REST API для различных задач, одной из которых является запрос на развертывание,

Затем журнал заполняется в базе данных. Поэтому я создал другую конечную точку API REST для возврата сообщения журнала для определенного идентификатора запроса. Теперь я хочу, чтобы, когда showStatus стало истинным, log_url, используемый axios.get, должен был постоянно нажимать и извлекать данные из конечной точки бэкэнда, получая данные через 30 секунд. и покажите это на показе ниже как statusMessage.

<script>
import Vue from 'vue';
import axios from "axios";
import Multiselect from "vue-multiselect";


Vue.component("multiselect", Multiselect);

export default {
    name: 'SelectServices',
    data: function() {
        return {
            selectedService: "",
            services: [],
            updateExisting: "",
            showStatus: false,
            statusMessage : ""
        }
    },
    mounted() {

        console.log("running script");

    },
    methods : {
        selectServiceToDeploy: function(){
            // alert("micro services");
        },
        deploySelected: function(){

            this.showStatus = true ;
            // animate open the status window.
            $("#status_update").animate({height: '500'})
            var url = "http://localwebsite.com:5060/services/request_deploy";
                axios.post(url)
                .then(response => {
                    if (typeof response.data.reason != "undefined"){
                        alert("Recieved Status: " + response.data.status + ",\nReason: " + response.data.reason);
                    }
                    var req_id = response.data.result.request_id;
                    this.statusMessage = "Initiating deployment of Services for Request ID: " + req_id ;

                    var log_url = "http://localwebsite.com:5060/services/get_logs/" + req_id;

                    axios.get(log_url)
                    .then(response => {
                                if (response.data.status == "success"){
                                    this.statusMessage = this.statusMessage + response.data.logs;
                                }
                            })
                })
                .catch((err) => {
                    console.log("Error happened: " + err.request.message);
                    alert(err);
                    return Promise.reject(err);
                })
                console.log(url);
                console.log(log_url);

        }
    }
}

на основе вышеупомянутой логики, которую я написал в vue, он успешно запрашивает развертывание, но журналы не печатаются в пользовательском интерфейсе! как я могу постоянно получать данные из http://localwebsite.com:5060/services/get_logs/" + req_id через каждые 30 секунд.

Answer 1

Вы можете сделать что-то в навесном крючке:

mounted(){
    this.interval = setInterval(() => {
        axios.get(this.my_url).then(res => { /* do something */});
    }, 30000 );
},
data(){
    return {
        interval: undefined,
         my_url: undefined
    }
}

setInterval - это функция javascript, которая позволяет запускать функцию каждые предварительно заданные миллисекунды. Вы можете отменить его позже с помощью следующей команды: clearInterval (this.interval). Вы также можете изменить my_url, когда захотите:)