reactjs - 如何使用 axios 发出 API 请求?
问题描述
我是反应的初学者,我有以下问题:
我使用一个超过 60 个字符的 API,我的问题是我想确保我的 API 的所有字符都呈现出来,而无需手动添加每个数字。({this.state.people[0].name} , ..., {this.state.people[n].name})。
这个问题也让我做了两次 API 调用,因为 API 每次调用只给出 10 个结果。他们接下来是第 2 页。
我用 ?=page2 创建了一个新调用,但这是一种非常乏味的方法,因为我必须添加 10 个不同的 API 调用来添加所有字符。我想过做一个 for 循环,但我真的不知道如何解决这个问题。
class Api extends Component {
state ={
people:[
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
],
people2:[
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
{name:'Title'},
]
}
componentDidMount() {
axios.get('https://swapi.co/api/people/')
.then(starwars => {
this.setState({
people: starwars.data.results
})
console.log(starwars.data.results)
})
axios.get('https://swapi.co/api/people/?page=2')
.then(starwars2 => {
this.setState({
people2: starwars2.data.results
})
console.log(starwars2.data.results)
})
.catch(error => {
console.log(error);
});
}
render(){
return (
<div>
<Cards title={this.state.people[0].name} />
<Cards title={this.state.people[1].name} />
<Cards title={this.state.people[2].name} />
<Cards title={this.state.people[3].name} />
<Cards title={this.state.people[4].name} />
<Cards title={this.state.people[5].name} />
<Cards title={this.state.people[6].name} />
<Cards title={this.state.people[7].name} />
<Cards title={this.state.people[8].name} />
<Cards title={this.state.people[9].name} />
<Cards title={this.state.people2[0].name} />
<Cards title={this.state.people2[1].name} />
<Cards title={this.state.people2[2].name} />
<Cards title={this.state.people2[3].name} />
<Cards title={this.state.people2[4].name} />
<Cards title={this.state.people2[5].name} />
<Cards title={this.state.people2[6].name} />
<Cards title={this.state.people2[7].name} />
<Cards title={this.state.people2[8].name} />
<Cards title={this.state.people2[9].name} />
</div>)
}
}
export default Api;
一次调用 60 个字符的 API 调用。
解决方案
正如您所说,您可以以编程方式循环并获取所有人. 为此,您需要知道那里有多少页。请求https://swapi.co/api/people/
返回 acount
作为响应的一部分。假设这是总人数,您可以使用它来计算您需要查询的页面数。它看起来像这样:
注意:我为此使用了 Node,只需添加必要的 React 位。
const axios = require("axios");
// first page
axios("https://swapi.co/api/people/")
.then(starwars => {
return starwars.data.count;
})
.then(count => {
// exclude the first request
const numberOfPagesLeft = Math.ceil((count - 1) / 10);
let promises = [];
// start at 2 as you already queried the first page
for (let i = 2; i <= numberOfPagesLeft; i++) {
promises.push(axios(`https://swapi.co/api/people?page=${i}`));
}
return Promise.all(promises);
})
.then(response => {
// collect all results into one array
const result = response.reduce((acc, data) => [...acc, ...data.data.results], []);
return result;
//result should contain the remaining records - pages 2 through n.
})
.catch(error => console.log("Properly handle your exception here"));
与往常一样,请注意快速失败的行为Promise.all
推荐阅读
- android - 403 - disallowed_useragent - 基于 Webview 的 Android TV 浏览器
- c# - Update failed because it contains a derived or constant field
- php - Laravel:无法加入表格
- jquery - 减少带有变量的switch语句?
- r - Converting R function to Rcpp
- html - 悬停覆盖下一个元素
- apache-nifi - Append filenames of flowfiles in NiFi to CSV file
- r - 用于在一个数据集中搜索信息并将其插入另一个数据集中的 R 程序
- javascript - 亚马逊 Alexa 自定义插槽备忘录
- css - Django 中的 GUI CSS 选择器