2013-05-07 96 views
20

如何在async for循環之後添加回調函數?async for each循環之後回調函數

下面是一些更好的方面:

$scope.getAlbums = function(user, callback) { 
    $scope.albumsList.forEach(function (obj, i) { 
     $scope.getAlbum(user, obj.id, function(value){ 
      $scope.albums.push(value); 
     }); 
    }); 
    // callback(); ??? 
}; 

$scope.getAlbums('guy123', function(){ 
    // forEach loop is all done! 
    console.log($scope.albums) 
}); 

控制器:

.controller('Filters', ['$scope','Imgur', function($scope, Imgur) { 

    $scope.getAlbum = function(user, id, callback) { 
     Imgur.album.get({user:user, id:id},  
      function(value) { 
       return callback(value.data); 
      } 
     ); 
    } 

    $scope.getAlbums = function(user, callback) { 
     // Callback function at end of this forEach loop? 
     // Request is async... 
     $scope.albumsList.forEach(function (obj, i) { 
      $scope.getAlbum(user, obj.id, function(value){ 
       $scope.albums.push(value); 
      }); 
     }); 
    }; 
)]}; 

服務:

.factory('Imgur', function($resource) { 
    return { 
     album : $resource('https://api.imgur.com/3/account/:user/album/:id') 
    } 
}); 

回答

44

正如安德魯所說的使用$q和延期對象應該可以讓你實現你的目標。

你想用$q.all()這將確保所有承諾的對象都解決了,然後你可以用$http電話撥打你的電話回.then()

function MyCtrl($scope, $q, $http) { 

    $scope.albumsList = [{ 
      id: 1, 
      name: "11" 
     }, { 
      id: 2, 
      name: "22" 
     } 
    ]; 
    $scope.albums = []; 
    $scope.getAlbum = function(user, id, callback) { 
     return $http.get("https://api.imgur.com/3/account/" + user + "/album/" + id).success(
      function(value) { 
       return callback(value.data); 
      } 
     ); 
    } 
    $scope.getAlbums = function (user, callback) { 
     var prom = []; 
     $scope.albumsList.forEach(function (obj, i) { 
      prom.push($scope.getAlbum(user, obj.id, function(value){ 
       $scope.albums.push(value); 
      })); 
     }); 
     $q.all(prom).then(function() { 
      callback(); 
     }); 
    }; 
    $scope.getAlbums('guy123', function() { 
     alert($scope.albums.length); 
    }); 
} 

Example with this on jsfiddle

運作,但不

隨着延期對象,你可以訪問一個承諾,你可以改變連續then()一起調用。當您解析延遲對象時,它將執行foreach,然後執行您提供的回調函數。我試圖進一步簡化你的例子,所以它可以在jsfiddle中工作。

function MyCtrl($scope, $http, $q) { 

    $scope.albumsList = [{ 
     id: 1, 
     name: "11" 
    }, { 
     id: 2, 
     name: "22" 
    }]; 
    $scope.albums = []; 
    $scope.getAlbums = function (user, callback) { 
     var deferred = $q.defer(); 
     var promise = deferred.promise; 
     promise.then(function() { 
      $scope.albumsList.forEach(function (obj, i) { 
       $scope.albums.push(obj); 
      }); 
     }).then(function() { 
      callback(); 
     }); 
     deferred.resolve(); 
    }; 
    $scope.getAlbums('guy123', function() { 
     alert($scope.albums.length); 
    }); 
} 

Example on jsfiddle

A bit more reading on deferred and promises.

+0

這正是我所需要的,但是,當我嘗試使用外部資源數據時 - 它不符合它的承諾;)...您能否提供任何API數據(如Twitter)的示例? – 2013-05-08 00:39:56

+0

由於您使用的'$ resource'也會返回一個承諾,所以您需要修改代碼,以便它們一起鏈接承諾並調用'resolve()'啓動整個機制。 – 2013-05-08 01:05:14

+0

請參閱jsfiddle上的示例以更新模擬ajax文章。 – 2013-05-08 01:41:31

0

我t看起來像推遲http://docs.angularjs.org/api/ng.$q,特別是鏈接承諾可能在這裏很有用。

+0

你能分享一個例子在上下文中與這個問題:)? – 2013-05-07 23:46:14

+0

請看上面馬克的回答。 – 2013-05-08 00:31:09

5
$scope.getAlbums = function(user, callback) { 

     var promiseArr = []; 
     $scope.albumsList.forEach(function (obj, i) { 
      var anHttpPromise = 
      $scope.getAlbum(user, obj.id, function(value){ 
       $scope.albums.push(value); 
      }); 
      promiseArr.push(anHttpPromise); 
     }); 

     $q.all(promiseArr).then(function(){ 
      // This callback function will be called when all the promises are resolved. (when all the albums are retrived)  
     }) 
    }; 

    $scope.getAlbum = function(user, id, callback) { 
     var anHttpPromise = Imgur.album.get({user:user, id:id},  
      function(value) { 
       return callback(value.data); 
      } 
     ); 
     return anHttpPromise; 
    } 

在上面的代碼:

  1. getAlbum由返回一個承諾。
  2. 收集爲getAlbums列表
  3. 的每個迭代的承諾,一旦所有的承諾都收集,許數組被傳遞給 $q.all
  4. $q.all方法,而不是返回一個最終的承諾,其回調 功能將被觸發一次陣列中的所有承諾都解決了 。
+0

我已經實施了您的解決方案,並將最新更改推送到項目@ https://github.com/gigablox/angular-imgur-gallery/blob/master/app/js/controllers.js但是它仍然沒有推遲承諾。馬布我錯過了什麼? – 2013-05-08 13:52:23

4

使用$resource承諾PR commit提名爲1.1.3,我能包住$resource電話與$ q和控制自己的異步behavoir的流動。

$scope.getAlbum = function(user, id, callback) { 
    var promise = Imgur.album.get({user:user, id:id}).$promise.then(
     function(value){ 
      return callback(value.data); 
     }, 
     function(error){ 
      //Something went wrong! 
     } 
    ) 
    return promise; 
} 

$scope.getAlbums = function(user, callback) { 
    var prom = []; 
    $scope.albumsList.forEach(function (obj, i) { 
     var promise = 
     $scope.getAlbum(user, obj.id, function(value){ 
      $scope.albums.push(value); 
     }); 
     prom.push(promise); 

    }); 

    $q.all(prom).then(function() { 
     callback(); 
    }); 
}; 

$scope.getAlbums(user, function(){ 
    // Totally works, bro. 
    console.log($scope.albums); 
});