Angular.JS触发两个异步服务调用,然后在两个完成后执行操作

Question

我还在围绕Angular.JS缠绕我的大脑.

我有两个独立的$ http调用,从远程Web服务检索数据.我有一个动作,我想在两个服务调用完成后启动.

1. 第一个服务调用将填充$ scope.model
2. 第二个服务调用,修改$ scope.model中的数据(它添加了一些在视图中呈现的计数器属性)

另一个独特的要求是,最终将使用$ scope.model在控制器外部调用和更新第二个服务调用.这是一个通知消息泵.

我猜我将使用promises $ q和可能的$ service,但我不确定在一些最佳实践之后从哪里开始这样的事情.

我知道这听起来不像异步调用在这里是合适的,因为我的例子可以通过同步它来简化它.但是,第二个服务调用是一个通知更新程序,因此它将不断轮询到服务器(最终将使用websocket).

这是我在这个应用程序中看到的常见模式.

Answer 1

你会想要使用$ q承诺.特别是$ q.all().所有$ http方法都将返回promise.$q.all([promise, promise, promise]).then(doSomething)将等待所有承诺解决然后调用doSomething传递一个promises数组的结果.

app.service('myService', ['$http', '$q', function($http, $q) {
   return {
      waitForBoth: function() { 
          return $q.all([
             $http.get('/One/Thing'),
             $http.get('/Other/Thing')
          ]);
      };
   }
}]);

然后叫它:

app.controller('MyCtrl', ['$scope', 'myService', function($scope, myService) {
   myService.waitForBoth().then(function (returnValues){
       var from1 = returnValues[0].data;
       var from2 = returnValues[1].data;
       //do something here.
   });
}]);

这是一个演示Plunker给你.