Question

我仍在围绕Angular.JS缠身。

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

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

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

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

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

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

Answer 1

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

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。

Answer 2

为您的首次服务电话创建服务。皮特的回答将有助于此：https://stackoverflow.com/a/12513509/215945

在你的控制器中，在then（）回调中，为相应的$ scope.model属性添加$ watch：

app.controller('MainCtrl', function(myService, $scope) {
  myService.async().then(function(myData) {
    $scope.model = myData;
    $scope.$watch('model.???', function(newVal, oldVal) {
      if(newVal !== oldVal) {
         // do something here, now that $scope.model.??? has changed
      }
    })
  });
});

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

2 个答案: