Как вытащить несколько страниц данных из API

Question

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

"info": {
"count": 493,
"pages": 25,
"next": "https://rickandmortyapi.com/api/character/?page=2",
"prev": ""
},
"results": [
{
"id": 1,
"name": "Rick Sanchez",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",

},
{
"id": 2,
"name": "Morty Smith",
"status": "Alive",
"species": "Human",
"type": "",
"gender": "Male",

Вот как данные JSON структурирован и есть 20 человек на странице. Я думаю, что это как-то связано с использованием .com / API / character / next path, но не могу обойти это из-за неопытности. Это мой вызов в файле приложения. js.

function App() {
const [characters, setCharacters] = useState([]);

useEffect(() => {
  async function fetchChar() {
    let res = await fetch("https://rickandmortyapi.com/api/character/")
    let data = await res.json();
    setCharacters(data.results);
}
fetchChar();
}, [])

Вот так я и возвращаюсь в файле компонента «Персонажи». js (с использованием semanti c -UI-реагировать). На странице отображаются первые 20 символов.

 return(
        <div>
        <h1>People</h1>
        <Grid columns={4}>
{data.map((characters, i) => {
                return (
                    <Grid.Column key={i}>
                        <Card>
                            <Card.Content>
                                <Card.Header>{characters.name}</Card.Header>
                                <Card.Description>
                                    <strong>Status</strong>
                                    <p>{characters.status}</p>

Мне кажется, что должен быть более простой способ извлечь несколько страниц, но после 3 часов исследований я все еще не могу понять вне. Есть ли способ вытащить все 493 символа со всех 25 страниц или мне нужно будет сделать 25 разных вызовов?

Answer 1

Вы получаете постраничные результаты из API. Либо вам нужно использовать вызов API, который возвращает весь набор данных (если он существует), либо вам нужно сделать 25 вызовов. Вы просто продолжаете извлекать со значением next, добавляя к массиву данных, которые вы собираете, пока next предположительно не станет пустым и вызовы не прекратятся.

Answer 2

сделать Promise.all на остальных страницах

async function fetchChar() {
  let res = await fetch("https://rickandmortyapi.com/api/character/");
  let data = await res.json();

  const restOfThepages = await Promise.all(
    Array(data.info.pages - 1)
      .fill(0)
      .map(i =>
        fetch(`https://rickandmortyapi.com/api/character/?page=${i + 2}`).then(res => res.json()).then(d => d.results)
      )
  );

  const flattenedData = restOfThepages.reduce((acc, d) => [...acc, ...d], []);
  return [...data.results, ...flattenedData];
}