从不同的 API 调用调用 API 端点

Question

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

我正在使用 axios 获取 20 个口袋妖怪的列表：axios.get('https://pokeapi.co/api/v2/pokemon/')

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

我想执行以下操作：

1. 获取 20 个口袋妖怪的列表
2. 遍历数组并调用每个口袋妖怪详细信息端点

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

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 调用以获取口袋妖怪及其详细信息 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);
});
}, []);

我对下一步要做什么有点困惑。我会在最初的.then()块中调用Promise.all(pokemonUrls)吗？还是我需要创建一个新的副作用钩子？

任何方向，以便我知道下一步该采取什么方向将不胜感激。

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