javascript - API 请求的数量以及什么算作请求

Question

我对用编程做东西还比较陌生。我正在使用 Rick and Morty API ( https://rickandmortyapi.com/ ) 制作 Rick and Morty 应用程序。早期，当我最初加载页面时，我在控制台中收到“加载资源失败：服务器响应状态为 429 ()”的错误消息，大概是 20 次。这是关于一些没有加载的图像。当我刷新页面时，它们加载了。我停止运行本地主机并重新启动并得到相同的结果，但是当我在其他时间尝试相同的事情时，我没有任何问题。

这条消息在 GitHub 上：“rick and morty api 是一个开放的 API，不需要访问令牌。但是，该 API 限制为每天 10000 个请求。这是为了减少恶意使用 API 示例的使用"

所以有些问题：

1. 为什么我收到该错误并且某些图像无法加载？重要的一点是，我在这一天（9 月 9 日，星期四）早些时候没有提出任何要求，尽管我昨晚可能在不到 24 小时前提出了一些要求。但是现在我不再收到此错误，即使我退出并重新启动本地主机也是如此。

2. 与该问题相关的是，API 速率限制通常是按日历天还是按 24 小时滚动时间表起作用？

3. 我实际提出了多少请求？有 671 个字符，我要获取 34 页来获取它们。所以每次我运行本地主机时都有 34 个请求？还是671？或者每次我实际重新加载页面时有 34 或 671 个请求？

问题 3 实际上是我最想知道的问题，因此，如果您知道该问题的答案而不知道其他问题的答案，那么这很有效，并且其他人可能也可以回答其他问题，或者如果您拥有所有答案也很棒。

代码在这里：

import React, { Component, useEffect, useState } from 'react';
import logo from '../rickandmortylogo.png';

export const Body = () => {
    const [characters, setCharacters] = useState([]);
    const [nameInput, setNameInput] = useState('');
    const [locationInput, setLocationInput] = useState('');
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        let url = 'https://rickandmortyapi.com/api/character/';
        let array = [];
        const fetchAPI = async () => {
          for (let i = 1; i < 34; i++) {
            let response = await fetch(url);
            let data = await response.json();
            for (let j = 0; j < 20; j++) {
              array.push(data.results[j]);
            }
            url = data.info.next;
            
          }
          setCharacters(array);
          setLoading(false);
        }
        fetchAPI();
    }, []);

    const readInput = (e) => {
        setNameInput(e.target.value);        
    }

    const readLocationInput = (e) => {
        setLocationInput(e.target.value);        
    }

    const getID = (id) => {
      console.log(id);
    }
    
    return (
          <>
          <div className="text-center">
            <img src={logo} className="img-fluid" />
          </div>
          <h2>Click on a character here to add them to your favorites. Choose "Check Favorites" in the menu bar to see your favorites and "Search Characters" to come back.</h2>
            <div className="all">
              <h4>Search by name:</h4>
              <input onChange={readInput} />
              <h4>Search by location:</h4>
              <input onChange={readLocationInput} />
              <br />
              <div className="row m-1">
                {loading ? 'Loading can take a few seconds. Your Rick and Morty experience will be ready soon!' : characters.filter((item) => {
                  if (nameInput == "") {
                    return item;
                  } else {
                    if (item.name.toLowerCase().includes(nameInput.toLowerCase())) {
                      return item;
                    }
                  }
                }).filter((item) => {
                  if (locationInput == "") {
                    return item;
                  } else {
                    if (item.location.name.toLowerCase().includes(locationInput.toLowerCase())) {
                      return item;
                    }
                  }
                }).map((item, id) => {
                  return (
                  <>
                      <div className="col-md-4 border border-dark rounded" id="square" onClick={() => getID(item.id)}>
                      <h2>{item.name}</h2>
                      <img src={item.image} className="border rounded" />
                      <h4>Location: {item.location.name}</h4>
                      <h4>Status: {item.status}</h4>
                      </div>
                  </>
                  );
                })}
              </div>
            </div>
            </>
    );
};

标签： javascriptreactjsfetchfetch-apirate-limiting