Angular 2 Promise 设计答案

【问题标题】：Angular 2 Promise designAngular 2 Promise 设计
【发布时间】：2017-08-14 08:36:45
【问题描述】：

我正在努力寻找一种好的设计模式，用 Angular 2 中使用的 Promise 来解析初始值 - 我已经习惯了 Angular 1 中使用的延迟模式。

我正在使用 Promises 在初始化时一次性解决集合。稍后我想从集合中计算一些值并返回它。

export class HierarchyService {

    someCollection;

    constructor(private myService: MyService) { }

    ngOnInit(): void {
        myService.getCollection().then(value => this.someCollection = value);
    }

    public calculateValuesFromCollection(example: number) {
        //only return once someCollection has been resolved during initialisation!
        let someVariable = /* calculate some values from someCollection */
        return someVariable;
    }

}

如何在 Angular 2 中使用 Promise 来实现这一点？

【问题讨论】：

我不明白问题是什么或你试图解决什么问题，但承诺不是 Angular 模式developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
@GünterZöchbauer 我正在尝试异步初始化一个变量，然后在稍后的体育场使用解析的值。 Angular 2 使用您指定的模式 - 我只是试图指定我没有像 Angular 1 中的 $q 那样使用延迟模式。

标签： javascript angular ecmascript-6 promise

【解决方案1】：

只是

getSomePromise().then(val => this.someVar = val);

这并不能保证this.someVar 在您读取它时会有一个值。只有在响应到达后它才会有一个值。

你也可以使用

 this.someVar = getSomePromise();

如果要访问该值，请使用

 this.someVar.then(val => console.log(val));

或

<div>{{someVar | async}}</div>

【讨论】：

Gunter，使用 collectionReady 变量会不会是一种反模式在对集合执行算法之前会等待标志变为真吗？
我认为它是一种反模式。 Promise 已经通过 then() 方法提供了这一点，您可以在其中传递一个回调，该回调在值可用时执行。
由于 promise 调用了可能长时间运行的操作，我觉得这个解决方案失去了一些性能。否则你冷“预加载”然后只是等待完成时间，而不是完全加载。也就是说，它在技术上是最好的解决方案。
@MatthiasMüller 我不明白您认为“冷预载”和“满载”之间的区别。 then() 调用只执行一次异步调用。对于结果已经可用的后续调用，它几乎立即调用回调。只有当有很多个后续调用时，您才能衡量差异。

【解决方案2】：

您需要使用 'Map' 和 'Subscribe' 而不是 promise。例如

this.service.get(response)
            .subscribe(
            res =>this.object=res,
            error => this.errorMessage = error,
        );

【讨论】：

据我了解，可观察对象非常适合订阅事件流（与 RxJS 一样）。我有一个变量只会被解析一次，所以我希望使用 promise 模式。
但 promise 不是 angular2 模式
这根本解决不了问题
Observable 也不是 Angular2 模式。 Angular 使用它并尽可能地支持它，但 Promise 在整个 Angular2 中也得到了很好的支持。
您可以将 Observable 转换为 Promise 并根据需要使用。