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

Question

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

我正在尝试创建一个使用称为“ swapi”的《星球大战》 API的Web界面。 可以通过以下链接进行访问： https://swapi.co/ : https://swapi.co/

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

到现在为止还挺好。

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

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

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

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