无法使用 Angular (ES2015) 绑定到服务返回的承诺答案

【问题标题】：Can not bind to service's returned promise with Angular (ES2015)无法使用 Angular (ES2015) 绑定到服务返回的承诺
【发布时间】：2016-05-11 15:12:27
【问题描述】：

我正在学习将 Angular 与 ES2015（使用 webpack）一起使用，并且在使用这些功能时遇到了问题。我似乎找不到我所缺少的东西，所以也许你们中的一个人可以指引我正确的方向。

目前我只是尝试将控制器绑定到返回模拟数据的服务。

猫服务

_{catData.js 只返回一个 cat 对象的模拟数组}

import {cats}  from './catsData.js';

export default class catService {
    getData() {
        return Promise.resolve(cats);
    }
}

猫控制器

export default class CatController {
    constructor(catService) {
        this._catService = catService;   
        this.cats = [];
        this.activate();
    }

    activate() {
        this.getData();
    }

    getData() {
        this._catService.getData().then(cats=> {this.cats= cats;});
    }

}

app.js

_{我在哪里引导它}

import angular from 'angular';
const app = angular.module('catApp', []);

import  catController  from './catController.js';
import  catService from './catService.js';

app
    .controller('catController', catController)
    .service('catService', catService);

简单测试视图

<body ng-app="catApp">
    <div class="container" ng-controller="catController as vm>
        <ul>
            <li ng-repeat="cat in vm.cats">
                <div class="well">
                    {{cat.name}}
                    {{cat.age}}
                </div>
            </li>
        </ul>
    </div>
    <script src="bundle.js"></script>
</body>

我想澄清一下，在我在 catService 上使用 Promise.resolve 之前，我同步返回了数据并且一切正常。现在，猫的列表没有出现（也没有控制台错误）

【问题讨论】：

请使用 Plunker 或 jsFiddle。

标签： angularjs ecmascript-6 webpack

【解决方案1】：

所以在进一步挖掘之后，我发现 ES6 Promises 不能很好地与 angular 配合使用，而是使用了 $q。这已经解决了这个问题：

import {cats}  from './catsData.js';

export default class catService {
  constructor($q) {
    this.$q = $q;
  }

  getData() {
      let defer = this.$q.defer();
      defer.resolve(cats);
      return defer.promise;
 }
}

catServoce.$inject = ['$q'];

【讨论】：

对于一些额外的上下文，$q 和标准 Promises 之间的主要区别在于，$q 在 Promise 解决时启动摘要循环。这就是为什么在 Angular 中使用 ES6 Promises 时往往会遇到奇怪的问题；它们有点像在 Angular 的更改跟踪之外的真空中运行。每当你解决一个 ES6 承诺时，你可以通过调用 $scope.apply() 来绕过它，但我发现坚持使用 $q 会更容易，就像你在这里所做的那样。