Javascript 在ReactJs上每5秒执行一次Get请求

我正在尝试从我的reactjs应用程序每隔5秒执行一次对api的http get请求，尽管在前5秒完成所有请求后使用setTimeout函数

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);
  }
}

getPerson=（url）=>{
获取（url）
。然后（响应=>{
让person={}；
person.id=response.data.id；
person.name=response.data.name；
person.type=response.data.type；
本.状态.人.推（人）；
this.setState（{persons:this.state.persons}）；
});
}
componentDidMount（）{
对于（变量i=1；i<11；i++）{
this.getPerson（this.apirl+i）；
setTimeout（函数（）{
log（“等待下一个呼叫”）；
}, 5000);
}
}

componentDidMount（）{
设i=0；
let interval=setInterval（（）=>{
如果（i仍然存在从匿名块函数内部访问“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);

getPerson=（url）=>{
获取（url）
。然后（响应=>{
让person={}；
person.id=response.data.id；
person.name=response.data.name；
this.state.loadedperson.push（person）；
this.setState（{loadedPersons:this.state.loadedPersons}）；
});}
componentDidMount（）{
对于（var j=1；j<152；j++）{
this.getPerson（this.apirl+j）；
}
设i=1；
让那=这个状态；
console.log（“超出间隔的：+That”）；
let interval=setInterval（函数（that）{
log（“间隔中的那个：+That”）；
if（（i将http请求包含到setTimeout函数中会给我一个执行错误1.您需要
setInterval
2.您需要移动
getPerson（）
调用传递给
setInterval
3的函数。您应该更改API，以便可以通过一个请求请求所有人员数据4.您正在更改
此.state
，您不应该这样做5.如果必须使用多个请求，则应使用
Promise.all（）
6.您不断将新人员推送到状态，因此如果您解决当前问题，您的人员数组将有10个元素，然后是20个，然后是30个，等等。这真的是您想要的吗？关于您发布的评论：使用
setTimeout（（）=>{/*code here*/}，i*5000）
这应该可以解决
这个问题和时间问题。为什么不使用web套接字？我认为OP不想在两个人之间等待5秒钟；据我所知，他们想加载所有人，然后等待5秒钟，然后再加载所有人，等等@ChrisG可能，是的。这个问题现在还不清楚。什么t给了我一个想法，他希望这个解决方案是“虽然使用setTimeout函数，但在前5秒完成所有请求。”这意味着他不希望在5秒后完成所有请求。我想每5秒加载一个人，该代码的问题是我无法访问“this”对象，因此我不能对我的状态对象执行更改。@user3034457当“this”是箭头函数时，为什么您不能访问它？即使是这样，您也可以始终执行
let that=this
，然后使用
that.apiUrl
@user3034457我已经更新了答案。您现在可以试试吗？
  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);