如何在 Vue.js 中后端 API 数据值发生变化时自动更新前端

Question

我正在使用 axios 解析 JSON 数据，以使用 Vue.js 使用 API。有一个字段值10,20分钟后可以更新为11。

我遵循以下代码示例：https://jsfiddle.net/jonataswalker/416oz6ga/

getFollowers() {
      return new Promise((resolve, reject) => {
        axios.get('https://api.github.com/users/octocat')
          .then(response => resolve(response))
          .catch(err => reject(error))
      });
 }

与上面示例中的followers类似，我希望我的值在我的前端自动更改。

如何在前端更新此值？有什么建议吗？

Answer 1

因此，您有两种方法可以做到这一点。

一种是使用 websockets，这是从客户端到服务器的双向连接。 这需要在服务器上进行特定配置，并且必须更新客户端代码才能处理数据推送。 最近的 Medium 帖子可能是您入门的好方法。

另一种方法是在客户端上使用轮询。 使用计时器，以便每隔 N 秒向 API 发出请求并使用响应进行更新。

关于两者的优缺点已经写了一个很好的细分。

Answer 2

你不需要返回一个新的承诺，因为如果这是在"方法"中，我不确定你会如何处理这个承诺，但 axios 本身已经在你的查询中返回了一个承诺，你需要做的是：

getFollowers() {
  axios.get('https://api.github.com/users/octocat')
  .then(response => this.$set(this, 'data', response.data))
  .catch(err => (throw error))
 }