反应提取多个获取请求

发布于 2025-01-21 04:16:38 字数 619 浏览 1 评论 0原文

是否有一种更简单或有条不紊的方法来获取多个请求而无需使用循环？我基本上想获取有关所有Kanto Pokemon（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)
  },[])

原文

Is there a simpler or more methodical way of fetching multiple requests without having to use a for loop? I basically want to fetch all the information regarding all the Kanto pokemon (151 pokemon), and then extract just the name and front sprite of the pokemon updating my state with the new populated array after fetching all 151 requests. I'm considering doing so using Promise.all but then I have no way of keeping track of the counter for every pokemon.

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)
  },[])

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

囚你心 2025-01-28 04:16:38

创建一系列承诺。我已经使用了array.from（），但是您也可以使用循环并将承诺推到数组。然后使用Promise.all（）等待所有承诺，并在准备就绪时设置状态：

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>

Create an array of promises. I've used Array.from(), but you can also use a for loop and push the promises to an array. Then use Promise.all() to wait for all promises, and set the state when it's ready:

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>

回复收藏 0 原文

~没有更多了~