反应获取多个获取请求

Question

是否有更简单或更有条理的方法来获取多个请求而无需使用 for 循环？我基本上想获取有关所有 Kanto 口袋妖怪（151 个口袋妖怪）的所有信息，然后在获取所有 151 个请求后仅提取口袋妖怪的名称和正面精灵，用新填充的数组更新我的状态。我正在考虑使用 Promise.all 这样做，但我无法跟踪每个口袋妖怪的计数器。

const [pokemondata,setPokemondata] = useState([]);

useEffect(() => {
    const pokemon = []
    for (let i = 1;i < 152; i++) {
      fetch(`https://pokeapi.co/api/v2/pokemon-form/${i}`)
        .then((response) => {
            return response.json()
        })
        .then((data) => {
          pokemon.push({name: data.name,sprite: data.sprites.front_default})
        })
    }
    setPokemondata(pokemon)
  },[])

Answer 1

创建一个承诺数组。我使用了 Array.from()，但您也可以使用 for 循环并将承诺推送到数组。然后使用Promise.all()等待所有的promises，准备就绪时设置状态：

const { useState, useEffect } = React;

const Demo = () => {
  const [pokemondata, setPokemondata] = useState([]);

  useEffect(() => {
    Promise.all(Array.from({ length: 3 }, (_, i) => // change number to 151
      fetch(`https://pokeapi.co/api/v2/pokemon-form/${i + 1}`)
        .then(res => res.json())
        .then(({ name, sprites }) => ({
          name,
          sprite: sprites.front_default    
        }))
      )).then(setPokemondata)
  },[])
  
  return <div>{JSON.stringify(pokemondata)}</div>
}

ReactDOM.render(
  <Demo />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

反应获取多个获取请求

React fetching multiple get requests

javascript

reactjs

fetch