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到我目前的项目。

3 Solutions collect form web for “AngularJS – 等待多个资源查询完成”

你会想使用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... }); 

我认为一个更好的解决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... }); 

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方法将不会执行,因此可能会使你的界面处于不良状态。

  • 如何禁用在AngularJSinput的修剪?
  • 在Angular指令中recursion
  • 使用AngularJS跟踪Google Analytics页面浏览量
  • $使用隔离范围从内部指令监视ngModel
  • 如何在文件准备好的angular度控制器上运行function?
  • ui路由器嵌套的路由控制器没有被调用
  • 使用引导程序崩溃与angularjs
  • angularjs:ng-switch-when中的多个值
  • 一个控制器可以通话吗?
  • 如何在使用茉莉花进行unit testing时在AngularJS中模拟一项服务?
  • 数组更改时不触发$ watch