Question

我想每15秒查询一次API服务，这样我就可以从数据库中获取数据并检查是否有所更改。如果有更改，那么由于vue的工作原理，我的前端将自动更新。

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

我的问题是：

这是解决此类问题的好方法吗？
放置这样的循环的代码中的最佳位置是什么？

编辑：

使用setInterval()似乎是正确的方法，但是在created（）挂钩中使用带有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 polling using 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推送的事件。

以下是Denis Tsoi提到的Subscriptions in Vue-Apollo & GraphQL信息。

订阅是GraphQL功能，允许服务器发送后端发生特定事件时向客户端发送数据。订阅通常使用WebSockets实现，其中服务器与客户端保持稳定的连接。那就是我们用于之前所有互动的Request-Response-Cycle 该API不用于订阅。相反，客户最初通过指定哪个事件打开与服务器的稳定连接它对此感兴趣。每次发生此特定事件时，服务器使用该连接来推送与客户端事件。

Answer 2

这样的循环将在mounted ()生命周期挂钩中的组件脚本中进行。

这意味着一旦组件加载，您的循环就会触发。有关此技术的详细指导，Vue文档以及article都是不错的第一站。

vue.js：在哪里放置定期重复的后台查询

2 个答案: