Question

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

我知道这是因为它运行异步并且在我执行console.log的时候它还没有加载但是我应该这样做。这就是为什么我们使用 .then 不是吗？等到数据加载完毕。

要明确：我正在寻找一种方法来制作zones.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);
      });
    });
  }

已经非常感谢快速 React 离子和帮助。

Answer 1

最后，我以更美丽的方式修复了它：

getZones2(){
      var that = this;
      var zones = [];
  fetch('api/environment/zone/1')
    .then(res => res.json())
    .then((json) => {
      Promise.all(
        json.map(
          element => fetch('api/zone/point/' + element.zoneID)
            .then(res => res.json())
        )
      ).then(datas => {
        json.forEach((element, i) => {
          zones[element.zoneID] = element
          zones[element.zoneID].points = datas[i]

        })
        console.log(zones);
        zones.forEach(function(response){
            that.makeZone(response.name,response.zoneID,response.points);
        })
      })
    });
}

Answer 2

对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. }); }); }); }) }另一个{{1}}函数被调用，它是异步的。您可以使用下面的逻辑等到获得所有点数据并继续执行逻辑。

{{1}}

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

2 个答案: