사용자 다시 로드에 의존하지 않고 매분마다 API에 알림

Question

이것이 지금 제가 가지고 있는 것입니다. 내 Mount()에는 fetchCoins()가 있지만 이로 인해 사용자가 새로 고칠 때마다 API가 호출됩니다

API를 호출하려고 하는데 데이터가 로컬 저장소에 저장되어 있다가 1분마다 데이터를 가져옵니다

methods: {
    async fetchCoins() {
      const response = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=1h");
      const data = await response.json();
      this.coins = this.coins.concat(data);
    },

    setData() {
      localStorage.setItem('coin-info', JSON.stringify(this.coins))
    },

    getData() {
      let get = localStorage.getItem('coin-info', []);
      this.coins = JSON.parse(get);
      console.log(this.coins);

      setInterval(() => {
        this.fetchCoins()
      }, 60000);
    },
}

Answer 1

마지막 가져오기가 발생한 날짜를 localStorage에서 추적해야 합니다. 구현 예는 다음과 같습니다.

으아아아

함수 호출에 mounted 函数中更改对 this.fetchCoins() 참여해야 합니다.

그러나 이 코드 조각에는 (질문의 범위를 넘어서는) 몇 가지 주의 사항이 있다는 점을 명심하십시오.

• setTimeout 和 setInterval은 완전히 정확한 시간 함수가 아닙니다. 몇 밀리초 정도 지연될 수 있습니다. 이런 종류의 오류가 걱정된다면 이 질문과 같이 해결책을 제안하는 다른 질문을 살펴보세요.
• 이 코드 조각은 구성 요소의 단일 인스턴스에만 작동합니다. 여러 구성 요소를 만들면 coin-info-last-fetch가 쓰여지는 경쟁 조건이 발생합니다.
• 구성 요소가 파괴되더라도 가져오기 루프를 막을 수 있는 것은 아무것도 없습니다. setTimeout에서 반환된 시간 초과 ID를 구성 요소의 데이터에 저장해야 결국 삭제할 수 있습니다.