AngularJS等待foreach内部的所有异步调用

时间:2014-04-03 16:22:25

标签: javascript angularjs asynchronous trello

我使用angular.forEach循环遍历数组并调用非角度ajax库(Trello client.js)。客户端确实有“成功”和“错误”回调,但不会返回角度延迟。所有ajax调用完成后,我想执行一个函数。

我有以下代码:

$scope.addCards = function(listId)
            {
                var cardTitles = $scope.quickEntryCards[listId].split('\n');
                angular.forEach(cardTitles, function(cardTitle,key)
                {
                    Trello.post('/cards', {
                        name:cardTitle,
                        idList:listId
                    },function(){ }, function(){ });
                });
                //TODO: wait for above to complete...
                $scope.init($routeParams.boardId);  
                $scope.quickEntryCards[listId] = '';    
            };

我可以在// TODO和回调函数中做什么,以便最后2行只在所有帖子成功或失败后运行?

5 个答案:

答案 0 :(得分:24)

使用angular&#q; $ q服务的伪代码。

requests = [];

forEach cardTitle
   var deferred = $q.defer();
   requests.push(deferred);
   Trello.post('/path', {}, deferred.resolve, deferred.reject);

$q.all(requests).then(function(){
    // TODO
});

答案 1 :(得分:10)

对于那些寻找问题标题“AngularJS等待foreach结束内所有异步调用”的答案的人来说,这是实现它的一般方法,也是使用angular的$ q服务:

$scope.myArray = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var loopPromises = [];
angular.forEach($scope.myArray, function (myItem) {
    var deferred = $q.defer();
    loopPromises.push(deferred.promise);
    //sample of a long-running operation inside loop...
    setTimeout(function () {
        deferred.resolve();
        console.log('long-running operation inside forEach loop done');
    }, 2000);

});
$q.all(loopPromises).then(function () {
    console.log('forEach loop completed. Do Something after it...');
});

这是一个有效的sample

答案 2 :(得分:3)

查看异步库https://github.com/caolan/async

因此,你可以并行或串行运行所有的asyn函数,并且一旦完成所有的回调函数就会执行。

async.parallel([
    function(){ ... },
    function(){ ... }
], callback);

async.series([
    function(){ ... },
    function(){ ... }
]);

希望它有所帮助。

答案 3 :(得分:2)

简单地说,你可以这样做

var jsonArray3=[];
angular.forEach($scope.jsonArray1,function(value,key){
    angular.forEach(jsonArray2,function(v,k){
        if(v.id==value.id){
            $scope.jsonArray3.push(v);
        }
    })
})



$q.all($scope.jsonArray3).then(function(data){
   console.log("data:",data);
})

答案 4 :(得分:0)

您还可以使用map

var requests = cardTitles.map(function(title) {
  var deferred = $q.defer();
  Trello.post('/path', {}, deferred.resolve, deferred.reject);
  return deferred;
});

$q.all(requests).then(function() {

});

如果post方法已经返回了一个承诺:

var requests = cardTitles.map(function(title) {
  return $http.post('/path/' + title, {});
});

$q.all(requests).then(function() {

});