等待多个单独的 Promise 解决答案

【问题标题】：Wait for multiple separate promises to resolve等待多个单独的 Promise 解决
【发布时间】：2016-08-16 19:02:33
【问题描述】：

我对不同的控制器有角度承诺，我想在所有这些都完成后执行功能。

有没有什么方法可以通过事件或承诺来实现这一点？

【问题讨论】：

标签： javascript jquery angularjs events angular-promise

【解决方案1】：

查看$q 的文档，尤其是$q.all()。

https://docs.angularjs.org/api/ng/service/$q

【讨论】：

但我对不同的控制器有承诺，我不能使用 q.all
你必须有一个地方可以检测你的各种承诺何时解决。工厂是控制器之间进行通信的一种不错的方式。但这真的取决于您的用例，可能有更好的方法。用一些代码编辑您的问题，我可以提供更多帮助。

【解决方案2】：

Angular 文档非常清楚如何在控制器之间共享数据和方法....services（和工厂）

如果您发现自己需要协调多个控制器，则表明您需要服务。服务可以帮助解决这类情况（以及更多情况）。

看看这个 Plunkr：http://plnkr.co/edit/PXVL8YA3lOk7beSvVe5E?p=preview 并确保打开控制台以便查看日志消息。

在解决方法 A-C 之前，服务的方法 D 不会执行。

MyService.$inject = ['$q', '$timeout'];
function MyService($q, $timeout) {
  var MyService = this;

  var deferredA = $q.defer();
  var deferredB = $q.defer();
  var deferredC = $q.defer();

  // go ahead and call method D right away
  // it won't fire until all the other methods have completed
  methodD(); 

  MyService.methodA = function() {
    $timeout(function() {
      deferredA.resolve();
      console.log("Method A end!");
    }, 1000);
    console.log("Method A begin!");
  };

  MyService.methodB = function() {
    $timeout(function() {
      deferredB.resolve();
      console.log("Method B end!");
    }, 1000);
    console.log("Method B begin!");
  };

  MyService.methodC = function() {
   $timeout(function() {
      deferredC.resolve();
      console.log("Method C end!");
    }, 1000);
    console.log("Method C begin!");
  };

  function methodD() {
    $q.all([deferredA.promise, deferredB.promise, deferredC.promise]).then(function() {
      console.log("Method D called!");

      // reset all the promises and call method D again
      deferredA = $q.defer();
      deferredB = $q.defer();
      deferredC = $q.defer();
      methodD();
    });
  }
}

每个控制器都可以在任何时间点调用服务。方法 D 只会在所有控制器都已调用并且它们各自的 promise 都已解决后才会执行。

  Ctrl1.$inject = ['$scope', 'MyService'];
  function Ctrl1($scope, MyService) {
    $scope.go = function() {
      MyService.methodA();
    };
  }

  Ctrl2.$inject = ['$scope', 'MyService'];
  function Ctrl2($scope, MyService) {
    $scope.go = function() {
      MyService.methodB();
    };
  }

  Ctrl3.$inject = ['$scope', 'MyService'];
  function Ctrl3($scope, MyService) {
    $scope.go = function() {
      MyService.methodC();
    };
  }

【讨论】：