如何使用 Axios 使用 React 发出循环请求？

Question

如何循环 Axios 请求以填充对象数组？

我正在尝试创建一个使用名为 swapi 的星球大战 API 的 Web 界面。可以在此链接中访问：https://swapi.co/

我可以搜索人物、星舰、行星、物种和电影。因此，例如，如果我想搜索 Luke Skywalker，我会添加/api/people/1/like https://swapi.co/api/people/1/。

到现在为止还挺好。

现在，如果我想要每个星球大战角色，我只需删除数字 1，网址将是https://swapi.co/api/people/，我将拥有 87 个字符中的前十个字符，我想。

但我不想要 10 个。我想要所有这些……这让我做了一个多次请求来获取所有字符数据。问题是，如果我使用循环来发出请求，假设是一个 while 循环，它会在第一个请求将数据带到我的代码以对其进行处理之前完成所有搜索。

我正在通过 Redux 使用全局状态，并通过componentDidMount(). 它工作正常，实际上，前十个字符数据被检索，它们填充我在 React 中的渲染方法。但是如何在没有在这些请求之前结束的循环的情况下发出多个请求？

Answer 1

如果我使用 async / await 正确解决了您的问题，这就是我的解决方案：

getCharacter = async i => {
  let { characters } = this.state;
  let res = await axios.get(`https://swapi.co/api/people/${i}/`);
  characters.push(res);
  this.setState({ characters });
  return res;
};

componentDidMount() {
  // ids = [1, 2, 3, ..., 10]
  let ids = Array.from({length: 10}, (v, k) => k+1)
  Promise.all(ids.map(id => this.getCharacter(id)))
}

这是codesandbox中的完整代码：https ://codesandbox.io/embed/axios-react-ojpew ? fontsize =14