重复调用axios.get以显示来自端点的数据 [英] repetedly call a axios.get to display data from endpoint
问题描述
我正在研究用flask编写的后端,该后端返回用于各种任务的REST API,其中之一是请求部署,
I working on backend written in flask that returns REST API for various task, one of which is to request deployment,
然后将日志填充到数据库中.因此,我创建了另一个REST API端点,以返回特定请求ID的日志消息.现在,我想要的是一旦showStatus
为真,axios.get
使用的log_url
应该在30秒后不断命中并从后端端点检索数据.并在下面的显示中将其显示为statusMessage
.
Then log gets filled in the database. So I have created another REST API endpoint to return log message for the specific request id. Now what I want is to once the showStatus
is true the log_url
used by axios.get
should be constantly hitting and retrieving data from the backend endpoint retrieving data after 30 seconds. and show it in the show below as 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中成功编写了它,请求部署,但日志未在UI中打印!如何每隔30秒不断从http://localwebsite.com:5060/services/get_logs/" + req_id
检索数据.
based on the above logic I have written in vue it successfully request for deployment but the logs don't get printed in the UI! how can I constantly retrieve data from http://localwebsite.com:5060/services/get_logs/" + req_id
after every 30 seconds.
推荐答案
您可以在挂接的钩子中执行以下操作:
You can do something in the mounted hook:
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:)
setInterval is a javascript function that allow you to run a function every predefined milliseconds. You can cancel it later with the following command: clearInterval(this.interval). You can also change my_url when you want :)
这篇关于重复调用axios.get以显示来自端点的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!