在另一个Ajax请求中处理多个Ajax请求

Question

我使用angularjs的$ http方法获取多个“父”元素。在这个Ajax调用.success方法中，我必须迭代父元素，并对每个父元素使用另一个Ajax调用来获取其各自的子元素。我最终想要的是一个包含所有子元素对象的数组，因此我可以使用ng-repeat来显示它们。这就是为什么我要首先收集数组中的所有子元素，并将该数组写入到我用来显示的范围数组中，所以角度只会在收集所有子元素时更新。我并不擅长使用承诺，但我认为这应该可以通过使用它们。结构基本上是：

.success(function(parentElements){ 
        var tempChildElements = []; 
        $.each(parentElements, function(i, parentElement){ 
         getChildElements(parentElement) 
          .success(function(childElements){ 
           tempChildElements.concat(childElements); 
          }) 
         }) 
        }); 
    $scope.childElements = tempChildElements; 
}); 

基本上，我需要知道什么时候jQuery.each中的所有请求都完成了。

编辑：

于是，我改变了我的代码，以将您的答案，我想我接近，但它仍然没有工作。我得到的是：

$scope.loadChildren = function(){ 
      var tempchildren = []; 
      var promises = []; 
      restApi.getOwnparents() //Returns $http.get promise 
       .then(function(parents){ 

        parents.data.forEach(function(parent, i, parents){ 
         promises.push(restApi.getOwnchildren(parent) //Returns $http.get promise 
          .then(function(children){ 

           tempchildren = tempchildren.concat(children.data); 
          },function(msg){ 
           console.log(msg); 
          })); 

        }); 
       }, function(msg){ 
        console.log(msg); 
       }); 
      $q.all(promises).then(function(data){ 
       //Never gets called 
       $scope.currentElements = tempchildren; 
       console.log(tempchildren); 
      }); 
     }; 

编辑2： 我得到了它使用从你们的建议的工作，下面是我的代码。随意分享改进。

$scope.loadparents = function(){ 
var tempchildren = []; 
var promises = []; 
restApi.getOwnparents() 
    .then(function(parents){ 
     parent.data.forEach(function(parent, i, parents){ 
      promises.push(restApi.getOwnchildren(parent));    
     }); 
     $q.all(promises).then(function(data){ 
      console.log(data); 
      data.forEach(function(children){ 
       tempchildren = tempchildren.concat(children.data); 
      }); 
      $scope.currentElements = tempchildren; 
     }); 
    }); 

};

Answer 1

像这样的东西可能是可能的。通过您的parentElements环通该元素调用getChildElements。但是，如果您返回$http调用，将其推入阵列并将该阵列传递到$q.all，则getChildElements的响应将成为承诺。当你所有的阿贾克斯电话解决如此将$q.all。

var parentElements = [10, 20, 30, 40], 
     promises = []; 

    parentElements.forEach(function(i){ 
     //Each method is actually called here 
     promises.push(getChildElements(i)); 
    }); 

    //$q.all will resolve once all of your promises have been resolved. 
    $q.all(promises) 
     .then(function (data){ 
      //handle success 
      console.log('All Good', data); 
      //Modify your response into what ever structure you need, map may be helpfull 
      $scope.childElements = data.map(); 
     }); 

最有可能你的Ajax调用不会由数组传递给$q.all时间分辨但是关于承诺的另一个好处是，即使他们都解决$q.all将解决马上来代替。

看到它的行动。 http://jsfiddle.net/ht9wphg8/

Answer 2

每个请求本身都会返回一个承诺，然后可以放入一个数组并将该数组传递给$q.all()。

success()回调已被弃用，并且由于您需要返回承诺，因此无论如何您需要在原始请求回调中使用then()。

这里有一个样本工厂，这将使所有的请求，并做一次，你将有第一个请求的父数据返回到控制器：

app.factory('DataService', function($http, $q) { 
    return { 
    getData: function() { 
     // return initial promise 
     return $http.get('parent.json').then(function(resp) { 
     var parentArr = resp.data; 
     // create array of promises for child data 
     var promises = parentArr.map(function(parentItem, i) { 
      // return each child request promise to the array 
      return $http.get('child.json').then(function(resp) { 
      console.log('Child request #' + (i + 1) + ' completed'); 
      // update parent item 
      parentItem.child = resp.data 
      }); 
     }); 
     // return the promise wrapping array of child promises 
     return $q.all(promises).then(function() { 
      console.log('All requests completed'); 
      // when all done we want the parent array returned 
      return parentArr; 
     }); 
     }); 
    } 
    }; 
}); 

app.controller('MainCtrl', function($scope, DataService) { 
    DataService.getData().then(function(parentArr) { 
    console.log('Add data to scope') 
    $scope.parentArr = parentArr; 
    }); 

}); 

DEMO