angularjs - Angular.JS 触发两个异步服务调用，然后在两者都完成后执行操作

Question

我仍然把我的大脑围绕在 Angular.JS 上。

我有两个独立的 $http 调用，它们从远程 Web 服务中检索数据。我有一个要在两个服务调用完成后触发的操作。

第一个服务调用将填充 $scope.model

第二个服务调用，修改 $scope.model 中的数据(它添加了一些在 View 中呈现的计数器属性)

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

我猜我将使用 promises $q 和可能的 $service，但我不确定从哪里开始遵循一些最佳实践。

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

这是我将在此应用程序中看到的常见模式。

Answer 1

你会想要使用 $q promise 。特别是 $q.all()。所有 $http 方法都将返回 promise 。 $q.all([promise, promise, promise]).then(doSomething)将等待所有 promise 解决然后调用 doSomething将一系列 promise 结果传递给它。

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为你。