Блог

Я создаю веб-приложение random color of the day, используя API random color, который я нашел в Интернете. Пока все работает, но поскольку я новичок в JavaScript и React, мне немного любопытно, как бы я ограничил запрос API одним разом в день. Способ, которым работает API сейчас, заключается в том, что каждый раз, когда вы обновляете страницу, каждый раз будет отображаться новый цвет. Есть ли какой-либо способ ограничить это одним цветом, который будет отображаться в день — одним и тем же цветом — независимо от того, сколько раз вы обновляете страницу? Спасибо!

 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;
  

Как ограничить запрос API одним разом в день в React?

Вы не можете, на самом деле. Ограничение скорости API выполняется на сервере. Любой может очистить свои cookies, или локальное хранилище, или любые другие средства сохранения, которые вы используете в браузере, чтобы ограничить скорость запросов.

Я понимаю, что это учебное упражнение, но нет смысла изучать технику, которая не имеет реального применения.

вам просто нужно сохранять дату и цвета при каждой выборке. и аннулируйте ваш кэш на основе строки сегодняшней даты и сохраненной.

 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 amp;amp; 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
      });



    })
  }
  

https://www.npmjs.com/package/memory-cache это решение. Вот примеры использования API.

Это делает то, что вы ищете, сохраняя текущий цвет в браузере в течение одного дня. Код должен быть понятным, но просто спросите, не является ли это так.
(Протестировано в Chrome с серверной частью узла, но должно быть нормально в 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 amp;amp; localStorage.expireTime amp;amp; 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}`);
  }
  

(Редактировать: Удален вывод html и добавлена информация в консоль.вместо этого регистрируйте,

удален ‘localStorage.clear()’, который предназначался для отладки)