Vue.js에서 백엔드 API 데이터 값이 변경될 경우 프런트엔드를 자동으로 업데이트하려면 어떻게 해야 합니까?

Vue.js에서 백엔드 API 데이터 값이 변경될 경우 프런트엔드를 자동으로 업데이트하려면 어떻게 해야 합니까?

Vue.js에서 API를 소비하기 위해 Axios를 사용하여 JSON 데이터를 해석하고 있습니다.필드 값이 있습니다.1020분 후에 갱신할 수 있습니다.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위의 예에서는 프런트 엔드에서 값이 자동으로 변경되기를 원합니다.

프런트 엔드에서 이 값을 업데이트하려면 어떻게 해야 합니까?좋은 의견이라도 있나?

두 가지 방법이 있습니다.

하나는 클라이언트에서 서버로의 양방향 연결인 웹소켓을 사용하는 것입니다.이렇게 하려면 서버에 특정 구성이 필요하며 데이터 푸시를 처리하려면 클라이언트 코드를 업데이트해야 합니다.최신 Medium 투고는 시작하는 데 좋은 방법일 수 있습니다.

다른 방법은 클라이언트에 폴링을 사용하는 것입니다.N초마다 API에 대한 요구가 이루어지고 응답이 갱신되도록 타이머를 사용합니다.

어느 쪽이든 장단점에 대한 좋은 분석이 이미 쓰여져 있다.

새로운 약속을 반환할 필요가 없습니다.이것이 「방법」으로 되어 있는 경우는, 이 약속을 어떻게 취급할지는 잘 모르겠습니다만, 악리 자체는 이미 쿼리에서 약속을 반환하고 있기 때문입니다.필요한 것은 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/47036256/how-to-update-the-front-end-automatically-if-the-back-end-api-data-value-changes