如何使用Vue自动监视API端点中的更改？

Question

我正在构建一个应用程序，它使用Stackoverflow的API来获取最后一个问题的特定标记&把它放在我的应用程序上。我已经能够在特定的标记上获得最后一个问题，但是现在我希望能够自动检测API 中的changes &在不刷新浏览器或调用函数的情况下获取发布的最后一个问题。我和计算属性与观察器试过了，但我还没开始工作。我可能做错了，或者我的解决方案不是正确的方法。

这是我的代码片段

<template>
  <div class="question container-fluid">
    <h1 class="my-3"
    >
    Last "<span class="question_tag">{{ tag }}</span>" Question Details
    </h1>
    <b-form
      class="my-4" 
      @submit.prevent="updateTag"
    >
      <b-form-input
        class="w-auto"
        placeholder="Enter a stackoverflow tag"
        type="text"
        v-model="newTag"
      >
      </b-form-input>
    </b-form>
    <div class="question_title my-2">
      <strong>Title: </strong> <span>{{ details.title }}</span>
    </div>
    <div class="question_status my-2">
      <strong>Question answered: </strong><span>{{ details.is_answered }}</span>
    </div>
    <div class="question_views my-2">
      <strong>Views: </strong><span>{{ details.view_count }}</span>
    </div>
    <div class="question_answers my-2">
      <strong>Answers Count: </strong><span>{{ details.answer_count }}</span>
    </div>
    <div class="question_link my-2">
      <strong>Check question: </strong>
      <a :href="details.link"
      :title="details.link"
      rel="noopener"
      target="_blank"
      >
        Here
      </a>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'QuestionInfo',
  data(){
    return {
      details: '',
      tag: `phaser-framework`,
      newTag: ''
    }
  },
  mounted() {
    this.getTag()
  },
  methods: {
    getTag(){
      axios.get(`https://api.stackexchange.com//2.2/questions?order=desc&sort=creation&tagged=${this.tag}&site=stackoverflow`).then(response => {
        this.details = response.data.items[0]
        // console.log an error if get() method is unsuccessful
      }).catch(err => {
        console.log(err)
      })
    },
    updateTag() {
      this.tag = this.newTag
      this.getTag();
    },
  },
}
</script>

编辑：

我想找一个客户端的解决方案..。最好是一个Vue解决方案，如果有任何。我希望尽可能避免使用服务器端解决方案来实现此功能。

Answer 1

我找到了解决办法。这并不是最优雅的，但我最终决定使用setInterval() &使一个新API调用每10秒一次。每10秒获取一次新数据，就不会到达堆栈交换API的每日限制 &这解决了我的问题。

代码片段：

<script>
import axios from 'axios'

export default {
  name: 'QuestionInfo',
  data(){
    return {
      details: [],
      tag: `jquery`,
      newTag: ''
    }
  },
  // makes an API call on page load
  mounted() {
    this.getTag()
  },
  methods: {
    getTag(){
      setInterval(() => {
        axios.get(`https://api.stackexchange.com//2.2/questions?order=desc&sort=creation&tagged=${this.tag}&site=stackoverflow`).then(response => {
          this.details = response.data.items[0]
        // console.log an error if get() method is unsuccessful
        }).catch(err => {
          console.log(err)
        })
      }, 10000);
    },
    updateTag() {
      this.tag = this.newTag
      this.getTag();
    },
  },
}
</script>

Answer 2

看起来，您要做的是允许服务器向客户端发送事件，而不需要客户端的请求。有四种方法可以做到这一点。

1. 按一定的间隔点击API。
2. 长轮询
3. 服务器发送事件
4. Websockets

第一个是效率最低和浪费资源。必须建立每个新的传入连接，必须分析HTTP报头，必须执行对新数据的查询，并且必须生成和传递响应(通常没有提供新数据)。然后，必须关闭连接，清理所有资源。

第二种方法是设置长轮询.，其中仍然通过HTTP连接进行连接，但是连接会被延长，直到响应出现或超时为止。这样你就不会发送那么多的请求了。

服务器发送事件将为您解决这个问题，并且是您使用的有效解决方案，但它是单向的(从服务器到客户端的通信)，因此如果您需要与API来回通信，那么您可能需要尝试其他的方法。这取决于你的需要。

通常我会推荐websockets，但这取决于Stackoverflow是否支持websockets的使用，目前情况似乎并非如此。

对于您的用例，我首先看一下对websockets的支持。如果这不起作用，请查看服务器发送的事件是否会为您完成任务。如果这还不够，我建议实施长轮询，这将有助于减少一些资源浪费。