javascript - 如何显示数据不断变化的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

你说你在 mounted 上调用了 getLiveData()。如果那是您唯一一次调用该方法，那么这也是唯一一次更新数据。尝试使用 setInterval 调用该方法:

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