3
votes

Comment limiter une demande d'API à une fois par jour dans React?

Je crée une application Web de couleur aléatoire du jour à l'aide d'une API de couleur aléatoire que j'ai trouvée en ligne. Tout fonctionne jusqu'à présent, mais comme je suis nouveau dans JavaScript et React, je suis un peu curieux de savoir comment je limiterais une demande d'API à une fois par jour. La façon dont l'API fonctionne maintenant est que chaque fois que vous actualisez la page, une nouvelle couleur apparaîtra à chaque fois. Existe-t-il un moyen de limiter cela à une couleur qui apparaîtra par jour - la même couleur - quel que soit le nombre de fois que vous actualisez la page? Merci!

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
    items: [],
    isLoaded: true
  }
}

  componentDidMount() {
    fetch("http://www.colr.org/json/colors/random/7")
    .then(res => res.json())
    .then(res => {
      this.setState({
        isLoaded: true,
        items: res.colors
      });
    })
  }



  render() {

  var itemName = this.state.items.map(item => item.id)
  var itemHex = this.state.items.map(item => item.hex)
  //var itemHex = items.map(item => <div key={item.id}>{item.hex}</div>)

    if (!(this.state.isLoaded)) {
      return (
        <div>
          <h1>Not Loaded!</h1>
        </div>
      )
    }
    else {
    return (
      <section style={{ backgroundColor: "#" + itemHex[0]}} className="App">
        <h1>JR's color of the day is: <h2 style={{color: "#" + itemHex[4]}}>{itemName[0]}.</h2></h1>
        <h1>also, the hex is: {"#" + itemHex[0]}</h1>
        <h4>here are some other colors that go w/ it</h4>
        <div style={{backgroundColor: "#" + itemHex[1]}} className="rectangle1"></div>
        <div style={{backgroundColor: "#" + itemHex[2]}} className="rectangle2"></div>
        <div style={{backgroundColor: "#" + itemHex[3]}} className="rectangle3"></div>
      <h3><a href="http://www.colr.org/api.html">data courtesy of the color API, colr.org</a></h3>
      </section>
    );
  }
  }
}

export default App;

javascript reactjs api request limit

3 commentaires

Vous pouvez utiliser un cookie pour stocker une couleur par jour.

Des conseils ou des liens sur la façon dont je pourrais faire cela?

Si vous avez effectué les calculs sur le serveur, cela pourrait probablement fonctionner, ou vous pourriez envisager de stocker un identifiant par utilisateur dans une base de données, en plus de l'heure de la visite. Exemple de base: stockage de leur adresse IP, puis stockage du résultat de l'API servie dans la base de données.

3 Réponses :

1
votes

il vous suffit de stocker la date et les couleurs à chaque extraction. et invalidez votre cache en fonction de la chaîne de date du jour et de celle stockée.

componentDidMount() {

  let cachedColors;

  if(localStorage.getItem('cached-colors'))
    cachedColors = JSON.parse(localStorage.getItem('cached-colors'));

  // setting cachedColors to null if it wasn't stored today
  if(cachedColors && new Date().toDateString() !== cachedColors.date)
    cachedColors = null;

  // if cachedColors still got value, it means we can use it as valid cache for today
  if(cachedColors)
      this.setState({
        isLoaded: true,
        items: cachedColors.value
      });
  else
    fetch("http://www.colr.org/json/colors/random/7")
    .then(res => res.json())
    .then(res => {
      this.setState({
        isLoaded: true,
        items: res.colors
      });



    })
  }

0 commentaires

2
votes

Comment limiter une demande d'API à une fois par jour dans React?

Vous ne pouvez pas, vraiment. La limitation de débit d'une API est effectuée sur le serveur. N'importe qui peut effacer ses cookies, son stockage local ou tout autre moyen de persistance que vous utilisez dans le navigateur pour limiter les demandes.

Je sais que c'est un exercice d'apprentissage, mais il ne sert à rien d'apprendre une technique qui n'a pas d'utilisation réelle.

2 commentaires

La mise en cache frontend a des utilisations dans le monde réel, bien que le cas d'utilisation d'OP soit un peu étrange, nous ne sommes pas ici pour juger de son application.

Bon point, une limite réelle n'est pas possible, même si je pense que l'OP a peut-être simplement voulu empêcher la mise à jour automatique de la couleur à chaque rechargement, pas nécessairement protéger contre toute utilisation malveillante de la suppression du cache.

0
votes

Cela fait ce que vous recherchez en stockant la couleur actuelle dans le navigateur pendant une journée. Le code doit être clair, mais demandez simplement si ce n'est pas le cas.
(Testé dans Chrome avec un backend Node, mais devrait convenir à React)

  let now = new Date().getTime(); // number of milliseconds since the 60's ended in London
  const oneDay = 1000 * 60 * 60 * 24; // number of milliseconds in a day

  if(localStorage.color && localStorage.expireTime && parseInt(localStorage.expireTime) > now){

    let storedColor = localStorage.color; // or localStorage.getItem("color")
    console.log(`Returning user -- Color from last visit is ${storedColor}`);
  }
  else{

    let newColor = "green"; // Set your new color here
    let newExpireTime = now + oneDay;
    localStorage.setItem("color", newColor);
    localStorage.setItem("expireTime", newExpireTime);

    let dateString = new Date(newExpireTime).toLocaleString();
    console.log(`First visit (since storage was cleared). New color, ${newColor}, will be replaced at ${dateString}`);
  }

(Edit: Suppression de la sortie html et ajout des informations à console.log à la place,
supprimé 'localStorage.clear ()', qui était pour le débogage)

0 commentaires