Как автоматически отслеживать изменения в конечной точке API с помощью Vue? - PullRequest
Новая
       30

Как автоматически отслеживать изменения в конечной точке API с помощью Vue?

0 голосов
/ 16 октября 2019

Я создаю приложение, которое использует API Stackoverflow , чтобы получить последний вопрос из определенный тег и выведите его в мое приложение. Я смог получить последний вопрос на определенный тег , но теперь я хочу, чтобы автоматическиобнаруживать изменения в конечной точке API и извлекать последний опубликованный вопрос, не обновляя браузер и не вызывая функцию. Я пробовал с Computed Properties & Watchers , но у меня не получилось. Возможно, я делаю это неправильно или мое решение не подходит.

Это мой фрагмент кода : 

<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 , если оно есть. Я бы хотел как можно больше избегать серверных решений для этой функции.

1 Ответ

0 голосов
/ 16 октября 2019

Я нашел решение. Это не самый элегантный, но я наконец решил использовать setInterval() и сделать новый вызов API каждые 10 секунд . Получение свежих данных каждые 10 секунд не достигнет дневного лимита API стека Exchange и решит мою проблему.

Фрагмент кода: 

<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>
...