React.js 获取 API 的多个端点

Posted 2023-02-22

【中文标题】React.js 获取 API 的多个端点

【英文标题】：React.js fetch multiple endpoints of API

【发布时间】：2022-01-22 15:13:05

【问题描述】：

我正在做一个React.js 项目。我正在尝试从具有多个端点的API 中提取数据。我在创建一个可以一次提取所有数据而不必单独执行每个端点的函数时遇到问题。 console.log 给出了一个空数组，没有任何显示。道具“电影”是来自父母的数据，工作正常。它也来自同一 API 的另一个端点。这是代码：

import  useEffect, useState  from "react";

import styles from './MovieDetail.module.css';

const MovieDetail = (films) => 
    const [results, setResults] = useState([]);

    const fetchApis = async () => 
        const peopleApiCall = await fetch('https://www.swapi.tech/api/people/');
        const planetsApiCall = await fetch('https://www.swapi.tech/api/planets/');
        const starshipsApiCall = await fetch('https://www.swapi.tech/api/starships/');
        const vehicleApiCall = await fetch('https://www.swapi.tech/api/vehicles/');
        const speciesApiCall = await fetch('https://www.swapi.tech/api/species/');
        const json = await [peopleApiCall, planetsApiCall, starshipsApiCall, vehicleApiCall, speciesApiCall].json();
        setResults(json.results)        
    

    useEffect(() => 
            fetchApis();
    , [])

    console.log('results of fetchApis', results)

    return (
        <div className=styles.card>
            <div className=styles.container>
                <h1>films.properties.title</h1>
                <h2>results.people.name</h2>
                <p>results.planets.name</p>
            </div>            
        </div>
    );

 
export default MovieDetail;

更新

我刚刚在代码中添加了 Phil 的帖子并上传到了 codesanbox

【问题讨论】：

无法调用 API，请求过多，HTTP 429 错误。

我看到了错误@kiner_shah 我正在尝试解决它。谢谢。

【参考方案1】：

您想从每个请求中获取并检索 JSON 流。

类似的东西

const urls = 
  people: "https://www.swapi.tech/api/people/",
  planets: "https://www.swapi.tech/api/planets/",
  starships: "https://www.swapi.tech/api/starships/",
  vehicles: "https://www.swapi.tech/api/vehicles/",
  species: "https://www.swapi.tech/api/species/"


// ...

const [results, setResults] = useState();

const fetchApis = async () => 
  try 
    const responses = await Promise.all(Object.entries(urls).map(async ([ key, url ]) => 
      const res = await fetch(url)
      return [ key, (await res.json()).results ]
    ))

     return Object.fromEntries(responses)
   catch (err) 
    console.error(err)
  


useEffect(() => 
  fetchApis().then(setResults)
, [])

每个 URL 都会解析为一个数组，例如...

[ "people", [ uid: ... ] ]

一旦所有这些都解决了，它们就会变成一个对象（通过Object.fromEntries()）

  people: [uid: ... ],
  planets: [ ... ],
  // ...

请注意，每个属性都是一个数组，因此您需要类似

<h2>results.people[0].name</h2>

或者一个循环。

【讨论】：

感谢菲尔的帮助。不幸的是，如果我对结果进行 console.log，它会给出一个空数组，而且返回中不会显示任何内容

@JoaquinPalacios 看起来 /vehicle 是一个错误的 URL。应该是/vehicles。我已经更新了答案

@JoaquinPalacios 您似乎在您的沙盒链接中走向了一个奇怪的方向，所以我更新了我的答案以更清晰。