在另一個Ajax請求中處理多個Ajax請求

Question

我正在使用angularjs的$ http方法來獲取多個“父”元素。 在此Ajax Calls .success方法中，我必須遍歷父元素，並對每個父元素使用另一個Ajax調用，以獲取其各自的子元素。 最后，我想要的是一個包含所有子元素對象的Array，因此我可以使用ng-repeat顯示它們。 這就是為什么我要首先收集數組中的所有子元素，然后將該數組寫入我要顯示的作用域數組，所以angular僅在收集所有子元素時才會更新。 我並不精通使用諾言，但是我認為使用諾言應該是可能的。 結構基本上是：

.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調用，則getChildElements的響應將是一個保證，因此將其推入數組並將該數組傳遞給$q.all 。 當您所有的ajax調用都解決后， $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但是關於promise的另一個$q.all是，即使它們都已解決， $q.all也會立即解決。

看到它在行動。 http://jsfiddle.net/ht9wphg8/

Answer 2

每個請求本身都會返回一個$q.all() ，然后可以將其放入一個數組並將該數組傳遞給$q.all() 。

不建議使用success()回調，並且由於您需要返回promise，因此無論如何都需要在原始請求回調中使用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