在ReactJs上每5秒执行一次Get请求
在ReactJs上每5秒执行一次Get请求
提问于 2019-11-14 20:39:00
我尝试从我的reactjs应用程序每隔5秒执行一次http get请求到api，尽管使用的是setTimeout函数，但在前5秒之后所有的请求都完成了。
getPerson = (url) => {
axios.get(url)
.then(response => {
let person = {};
person.id = response.data.id;
person.name = response.data.name;
person.type = response.data.type;
this.state.persons.push(person);
this.setState({ persons: this.state.persons });
});
}
componentDidMount() {
for(var i = 1; i < 11; i++){
this.getPerson(this.apiUrl + i);
setTimeout(function () {
console.log("waiting for the next call.");
}, 5000);
}
}回答 2
Stack Overflow用户
发布于 2019-11-14 20:49:06
componentDidMount() {
let i = 0;
let interval = setInterval(() => {
if (i<11) {
this.getPerson(this.apiUrl + i);
i++;
console.log("waiting for the next call.");
}
else {
clearInterval(interval)
}
}, 5000);
}为此，您应该使用setInterval()，而不是setTimeout()
编辑：以防您无法在setInterval()中访问this，尽管您应该这样做，因为它是一个箭头函数，您可以使用一种变通方法
let that = this，然后使用that.getPerson(that.apiUrl + i);调用您的方法
Stack Overflow用户
发布于 2019-11-14 21:52:57
从匿名块函数内部访问"this“对象仍然有问题。
getPerson = (url) => {
axios.get(url)
.then(response => {
let person = {};
person.id = response.data.id;
person.name = response.data.name;
this.state.loadedPersons.push(person);
this.setState({ loadedPersons: this.state.loadedPersons });
});}
componentDidMount() {
for (var j = 1; j < 152; j++) {
this.getPerson(this.apiUrl + j);
}
let i = 1;
let that = this.state;
console.log("That out of in interval:" + that);
let interval = setInterval(function (that) {
console.log("That in interval:" + that);
if ((i<152))
that.persons.push(that.loadedPersons[i]);
i++;
}
else {
clearInterval(interval)
}
}, 5000);}
控制台输出：
超出区间:对象对象
间隔:未定义
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58857001
复制相关文章
相似问题
腾讯云开发者
