反应ajax：多个嵌套获取获取

小编典典

反应ajax：多个嵌套获取获取

reactjs

有一个功能，首先获取环境中的所有区域，然后当他为每个区域找到这些区域时，它将对边界点进行api调用。所有提取均被执行，但问题在于，如果我尝试写出区域的
长度或尝试执行 .foreach ，则在第一次提取中，我得到0。

我知道这是因为它运行异步，并且在我执行console.log时尚未加载，但是我应该这样做。这就是为什么我们使用 .then 呢？等待数据加载完毕。

需要明确的是： 我正在寻找一种使zone.length返回对象数组的实际长度并立即被评估而不是从0开始求值的方法。我不知道如何：

这是代码。

getZones(){
      var that = this;
  var zones = new Array();
  fetch('api/environment/zone/1').then(function(response){
    response.json().then(function(data){
      data.forEach(function(element){
        zones[element.zoneID] = element;
        zones[element.zoneID].points = [];
        fetch('api/zone/point/'+element.zoneID).then(function(response){
          response.json().then(function(data){
            data.forEach(function(element){
              zones[element.zoneID].points.push(element);  
            });
          }); //closing of data inner fetch.
          });
        });
      });
    }).then(function(response){
      console.log(zones); //this gives all zones
      console.log(zones.length); //this one gives 0
//the for each is never executed because it's still 0.
      zones.forEach(function(element){  
        console.log(element);
      });
    });
  }

快速响应和帮助已经非常感谢。

阅读 269

2020-07-22

共1个答案

小编典典

调用fetch返回Promise，即为async。因此，您的第二个.then代码甚至在第一个代码中的代码完成之前就已经执行了，因为，您的第一个然后是contains另一个fetch函数，即异步函数。您可以使用如下所示的逻辑来等待，直到获得所有点数据，然后继续执行逻辑。

    getZones(){
          var that = this;
          // var zones = new Array();

          // this function gets called finally.
          // Do what you want to do with zones and points here.
          var gotAllZones = function(zones) {

              console.log(zones); //this gives all zones
              console.log(Object.keys(zones).length); //this one gives 0

              Object.keys(zones).forEach(function(index){  
                console.log(zones[index]);
              });
          }

          fetch('api/environment/zone/1').then(function(response){
            response.json().then(function(data){
              //decleare zones to be a object. Based on your code `zones` is not an array
              var zones = {};
              var pointsDone = 0; // declare how many points api has been completed. Initially its `0`
              data.forEach(function(element){
                zones[element.zoneID] = element;
                zones[element.zoneID].points = [];
                fetch('api/zone/point/'+element.zoneID).then(function(response){
                  response.json().then(function(innerData){
                    innerData.forEach(function(element){
                      zones[element.zoneID].points.push(element);  
                    });
                    pointsDone++; //each time we are done with one. we increment the value.

                    // we check if we are done collecting all points data
                    // if so we can call the final function. 
                    if(pointsDone === data.length) {
                      gotAllZones(zones);
                    }
                  }); //closing of data inner fetch.
                  });
                });
              });
            })
      }

2020-07-22