Question

我正在学习React，并在玩https://pokeapi.co/

我正在使用axios来获取20个神奇宝贝的列表：axios.get('https://pokeapi.co/api/v2/pokemon/')

这将返回一个对象数组。每个对象都有一个Pokemon的名称，以及API端点，以获取有关该特定Pokemon的更多详细信息。

我要执行以下操作：

获取20个神奇宝贝的清单
遍历数组并调用每个Pokemon细节端点

我有这段代码，可以正常工作，但是似乎并不理想，因为我正在进入我认为被称为“回调地狱”的地方：

const [characters, setCharacters] = React.useState([]);

React.useEffect( () => {
    // make axios call for list of pokemon

    axios.get('https://pokeapi.co/api/v2/pokemon/')
      .then( result => {
        result.data.results.forEach( character =>
          axios.get(character.url)
              .then( result => 
                setCharacters(
                  // add the pokemon object to the characters array
                    characters => [...characters, result.data])
                )
              )
              .catch( error => console.error(error));
      })
      .catch( error => {
        console.error(error);
      });
  }, []);

我一直在看Promise.all() / axios.all()，但对于如何称呼我有些困惑。

我最初的想法是，我应该进行第一个axios调用，以获取Pokemon及其详细URL的列表。诺言一旦解决，我将做出axios.get诺言的数组，如下所示：

const [characters, setCharacters] = React.useState([]);

React.useEffect( () => {
    // make axios call for list of pokemon

    axios.get('https://pokeapi.co/api/v2/pokemon/')
      .then( result => {
        const pokemonUrls = [];
        result.data.results.forEach( character =>
          pokemonUrls.push(character.url)
        )
      })
      .catch( error => {
        console.error(error);
      });
  }, []);

我对接下来要做什么感到困惑。我会在该初始Promise.all(pokemonUrls)块中调用.then()吗？还是我需要创建一个新的副作用挂钩？

任何方向，这样我就能知道下一步的方向了。

Answer 1

当然，经过数小时的研究，当我发布问题后，我很快就知道了。

这就是我最后得到的：

const [characters, setCharacters] = React.useState([]);

  React.useEffect( () => {
    let characterUrls = [];
    // make axios call for list of pokemon
    axios.get('https://pokeapi.co/api/v2/pokemon/')
      .then( result => {
        return axios.all(result.data.results.map( character => {
          return axios.get(character.url);
        }))
      })
      .then( results => {
        return results.map( character => character.data);
      })
      .then( results => setCharacters(results))
      .catch( error => {
        console.error(error);
      });
  }, []);

从其他API调用中调用API端点

1 个答案: