时间戳

首页 > 解决方案 > 同步获取 - ReactJS

javascript - 同步获取 - ReactJS

问题描述

在我循环的一个函数中，我正在其中进行 fetch 调用。当所有调用都完成后，我需要将值保存在一个变量中，但这对我来说不可能与调用异步。

getReportsGroup(bukrs){
        
    //TOTAL OF A PROJECT GROUP
    fetch('api/Reports/GetDataIRPA?SETCLASS=' + this.state.SETCLASS, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
       this.setState({
           reportIRPA: data
       });
     });
}

getTotalProjects(){
   //Browse selected projects
   for (var i = 0; i < this.state.selectProjects.length; i++) {
       this.getReportsGroup(this.state.selectProjects[i].bukrs);
   }
    
   console.log('finish all fetch');
}

该getTotalProjects函数正在执行一个getReportsGroup被调用的循环（在此处进行获取）。在所有获取结束时，我需要在getTotalProjects. 目前，它是异步的，它console.log('finish all fetch')在完成所有获取之前执行。

标签： javascriptreactjsasynchronoussynchronous

解决方案

您需要等到承诺解决。在第一种方法中返回承诺并在第二种方法中应用 .then

getReportsGroup(bukrs){

    //TOTAL OF A PROJECT GROUP
    return fetch('api/Reports/GetDataIRPA?SETCLASS=' + this.state.SETCLASS, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
       this.setState({
           reportIRPA: data,
       });
     });
}

getTotalProjects(){
   //Browse selected projects
   var promises = []; //array of promises
   for (var i = 0; i < selectProjects.length; i++) {
       var promise = this.getReportsGroup(selectProjects[i].bukrs); //single promise
       promises.push(promise);
   }
   Promise.all(promises ).then(function() {
      console.log("DISPLAY your Message here"); // display here
  });
   console.log('finish all fetch');
}

推荐阅读