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

Question

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

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

我可以搜索人物、星际飞船、行星、物种和电影。因此，例如，如果我想搜索 Luke Skywalker，我添加 /api/people/1/ 就像 https://swapi.co/api/people/1/ 一样。

到目前为止一切顺利。

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

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

我正在通过 Redux 使用全局状态，我正在通过 componentDidMount() 调用 Redux Thunk。它工作正常，实际上，前十个字符数据被检索，它们填充了我在 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)))
}

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