React.js 获取 API 的多个端点

Question

我正在做一个 React.js 项目。我正在尝试从具有多个端点的 API 中提取数据。我在创建一个函数时遇到了问题，该函数可以一次提取所有数据，而不必单独执行每个端点。 console.log 给出一个空数组，没有显示任何内容。道具 'films' 是来自 parent 的数据并且工作正常。它也来自同一 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 的 post 添加到代码中并上传到 codesanbox

Answer 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>

或循环。

React.js 获取 API 的多个端点

React.js fetch multiple endpoints of API

javascript

api

object

reactjs

fetch-api

更新