Notifier l'API toutes les minutes sans dépendre du rechargement de l'utilisateur

Question

C'est ce que j'ai maintenant. Sur mon Mount(), j'ai fetchCoins() mais cela appelle l'API chaque fois que l'utilisateur actualise

J'essaie d'appeler une API, les données sont stockées dans un stockage local puis récupèrent les données toutes les minutes

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

Vous devez garder une trace de la date dans localStorage à laquelle la dernière récupération a eu lieu. Voici un exemple de mise en œuvre :

   scheduleNextFetchCoins() {
       const lastFetch = new Date(localStorage.getItem('coin-info-last-fetch'));
       
       const timeDelta = Date.now() - lastFetch.valueOf();
       const nextCall = Math.max(60000 - timeDelta, 0);
       
       setTimeout(() => {
           this.fetchCoins();
           localStorage.setItem('coin-info-last-fetch', new Date());

           this.scheduleNextFetchCoins();
       }, nextCall)
   }

Vous devez être dans l'appel mounted 函数中更改对 this.fetchCoins() de la fonction.

Mais gardez à l'esprit qu'il y a quelques mises en garde concernant cet extrait de code (au-delà de la portée de la question) :

• setTimeout 和 setInterval n’est pas une fonction complètement précise du temps. Ils peuvent être retardés de quelques millisecondes. Si ce genre d'erreur vous inquiète, jetez un œil à d'autres questions qui proposent des solutions, comme celle-ci.
• Cet extrait de code ne fonctionne que pour une seule instance du composant. La création de plusieurs composants entraînera une condition de concurrence où coin-info-last-fetch est écrit.
• Rien ne peut arrêter la boucle de récupération, même si le composant est détruit. Vous devez stocker l'ID de délai d'attente renvoyé par setTimeout dans les données du composant afin de pouvoir éventuellement l'effacer.