react ajax：多个嵌套获取获取

Question

有一个函数首先获取环境中的所有区域，然后当他为每个区域找到这些区域时，它将对边界点进行 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);
      });
    });
  }

已经非常感谢您的快速反应和帮助。

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