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

Posted 2023-02-22

【中文标题】如何使用 Axios 通过 React 发出循环请求？

【英文标题】：How to make a loop request with React using Axios?

【发布时间】：2019-10-26 07:14:29

【问题描述】：

如何循环 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 中的渲染方法。但是，我怎样才能发出多个请求而不会在这些请求之前结束循环呢？

【问题讨论】：

您可能想为此搜索“javascript 中的同步与异步”。关于这个主题有很多精彩的文章。

您要查找的术语是“分页”

【参考方案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

【讨论】：

你好 Vahid Al，我打开了代码框链接，结果是 10 个名字。是否可以加载所有 87 个字符？经过我所有的尝试，我仍然只得到了 10 个名字。

当然，只需将 ids 长度从 10 更改为 87。我也更改了代码框。

让 ids = Array.from(length: 87, (v, k) => k+1)

抱歉，我没有意识到我可以更改长度。这就是解决方案。到目前为止，我还不知道 async / await 。非常感谢。

不客气，也许你想看看这个：javascript.info/async-await