如何從api中提取多頁數據

Question

我正在練習使用 React 從 API 中提取數據，但似乎無法弄清楚如何提取超過一頁的數據。

"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 路徑有關，但由於缺乏經驗，我無法理解它。 這是我在 App.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();
}, [])

這就是我在我的 Characters.js 組件文件中返回的方式（使用語義 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 個小時的研究后，我仍然無法弄清楚。 有沒有辦法從所有 25 個頁面中提取所有 493 個字符，或者我必須進行 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];
}