如何显示来自数据不断变化的api的响应？

Question

我正在使用 vuejs 和 Axios。

我有一个 API，它的响应不断变化，我想在前端显示更新的数据而不重新加载页面。

我正在使用这个 API https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json

目前，我正在做这件事

methods: {
    getLiveData(){
        axios.get("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json")
            .then(response => {
                console.log(response.data);
                this.liveData = response.data;
            })          
        }       
    }

我通过mounted调用这个函数，在这里我得到了响应，但它没有改变它自己我必须重新加载页面。我将如何自动更新数据。

到目前为止，我发现了一些插件，但一直停留在如何使用 https://www.npmjs.com/package/vue-socket.io 和一个术语 websocket 上，但也不知道如何使用它。

谢谢。

Answer 1

将this.liveData 放入观察者。 检查这个例子： Vuejs DOM doesn't update after fetching data

Answer 2

您说您在mounted 上致电getLiveData()。如果那是您调用该方法的唯一时间，那么这就是数据将被更新的唯一时间。尝试使用setInterval 调用该方法：

mounted() {
  setInterval(this.getLiveData, 150);
}