AngularJS – 等待多个资源查询完成

我有一个使用ngResource定义的工厂：

App.factory('Account', function($resource) { return $resource('url', {}, { query: { method: 'GET' } }); }); 

我正在对该工厂定义的查询方法进行多个调用。 通话可以asynchronous发生，但是我需要等待两个通话才能继续：

 App.controller('AccountsCtrl', function ($scope, Account) { $scope.loadAccounts = function () { var billingAccounts = Account.query({ type: 'billing' }); var shippingAccounts = Account.query({ type: 'shipping' }); // wait for both calls to complete before returning }; }); 

有没有办法做到这一点与ngResource定义的AngularJS工厂，类似于jQuery的$ .when（）。然后（）function？ 我不想添加jQuery到我目前的项目。

Answer 1

你会想使用promise和$ q.all（） 。

基本上，你可以用它来包装所有的$ resource或$ http调用，因为它们返回promise。

 function doQuery(type) { var d = $q.defer(); var result = Account.query({ type: type }, function() { d.resolve(result); }); return d.promise; } $q.all([ doQuery('billing'), doQuery('shipping') ]).then(function(data) { var billingAccounts = data[0]; var shippingAccounts = data[1]; //TODO: something... }); 

Answer 2

我认为一个更好的解决scheme是：

 $q.all([ Account.query({ type: 'billing' }).$promise, Account.query({ type: 'shipping' }).$promise ]).then(function(data) { var billingAccounts = data[0]; var shippingAccounts = data[1]; //TODO: something... }); 

Answer 3

Ben Lesh的解决scheme是最好的，但并不完整。 如果您需要处理错误条件 – 是的，那么您必须使用承诺API的catch方法，如下所示：

 $q.all([ doQuery('billing'), doQuery('shipping') ]).then(function(data) { var billingAccounts = data[0]; var shippingAccounts = data[1]; //TODO: something... }).catch(function(data) { //TODO: handle the error conditions... }).finally(function () { //TODO: do final clean up work, etc... }); 

如果你没有定义catch并且你所有的promise都失败了，那么then方法将不会执行，因此可能会使你的界面处于不良状态。