web-dev-qa-db-ja.com

AngularJSは、foreach終了内のすべての非同期呼び出しを待機します

Angular.forEachで配列をループし、非角度のajaxライブラリ（Trello client.js）を呼び出しています。クライアントには「success」および「error」コールバックがありますが、angular deferredを返しません。すべての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行は、すべての投稿が成功または失敗した後にのみ実行されますか？

javascriptangularjsasynchronoustrello
9
Daniel

angularの$ qサービスを使用した擬似コード。

requests = [];

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

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

質問のタイトル「AngularJSはforeachfinish内のすべての非同期呼び出しを待つ」への答えを探している人のために、これを達成するための一般的な方法もあります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...');
});

これが機能しています サンプル 。

10
Alfeu

非同期ライブラリをご覧ください https://github.com/caolan/async 。

したがって、すべてのasyn関数を並列または直列で実行でき、すべての関数が終了すると、共通のコールバックが実行されます。

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

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

それが役に立てば幸い。

3
dopplesoldner

簡単に言えば、あなたはこのようにすることができます

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);
})
2
Sajin M Aboobakkar

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メソッドがすでにpromiseを返している場合：

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

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

});
0
pomber