降低Django web应用程序中Vue.js更新方法的请求率

Question

我在Django模板中有一个Vue.js视图。Vue从Django Rest Framework端点提取要在视图中显示的数据。我的代码如下：

const app = new Vue({
el: '#app',
delimiters: ["[%", "%]"],
data: {
dedicated_server: [],
},
created() {
fetch('/api/dedicated-server/{{ object.id }}/')
.then(response => response.json())
.then(json => {
this.dedicated_server = json;
})
},
updated() {
/* TODO: Try and limit the number of requests to the API */
fetch('/api/dedicated-server/{{ object.id }}/')
.then(response => response.json())
.then(json => {
this.dedicated_server = json
})
},
});

正如你所看到的，我有一个更新的方法，如果数据发生变化，它会轮询Restful端点来更新页面。这一切都很好，但似乎每秒轮询Restful API端点3到5次。这在开发中很好，但如果我有100个人访问这个页面，那么它会用请求杀死我的服务器。

有没有办法限制Vue.js检查数据是否已更新的次数？如果你能说每5秒检查一次，那就太好了。

Answer 1

您可以使用setInterval每5秒运行一次。在created中设置它，就不必担心updated了。

setInterval(() => 
fetch('/api/dedicated-server/{{ object.id }}/')
.then(response => response.json())
.then(json => {
this.dedicated_server = json;
}),
5000);