如何使用Axios使用React进行循环请求？
如何使用Axios使用React进行循环请求？
提问于 2019-06-12 03:57:02
如何循环Axios请求以填充对象数组？
我正在尝试创建一个使用名为swapi的星球大战API的web界面。可通过以下链接访问：https://swapi.co/
我可以搜索人，星际飞船，行星，物种和电影。例如，如果我想搜索Luke Skywalker，我会添加像https://swapi.co/api/people/1/这样的/api/people/1/。
到目前一切尚好。
现在，如果我想要每个星球大战的字符，我只需要去掉数字1，url将是https://swapi.co/api/people/，我想我将拥有87个字符中的前10个字符。
但我不想要10个我想要所有的...这使得我执行多个请求来获取所有字符数据。问题是，如果我使用一个循环来发出请求，比如说一个while循环，它会在第一个请求将数据带到我的代码中处理它之前完成所有的搜索。
我通过Redux使用全局状态，并通过componentDidMount()调用Redux Thunk。它工作得很好，实际上，前十个字符数据被检索出来，它们填满了我在React中的render方法。但是，我如何才能发出多个请求，而不会有一个循环在这些请求之前结束？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-12 06:56:05
如果我使用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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56550914
复制相关文章
相似问题
腾讯云开发者
