Angular 2 Http 异步等待答案

【问题标题】：Angular 2 Http Async awaitAngular 2 Http 异步等待
【发布时间】：2017-06-10 22:27:04
【问题描述】：

我需要使用async/await来调用http.get

我试过https://labs.encoded.io/2016/12/08/asyncawait-with-angular/

但是

async getPrice(currency: string): Promise<number> {
  const response = await this.http.get(this.currentPriceUrl).toPromise();
  return response.json().bpi[currency].rate;
}

toPromise()

给我一个错误：

[ts] 类型“Observable”上不存在属性“toPromise”。

有什么解决办法吗？

【问题讨论】：

ts Property 'map' does not exist on type 'Observable<Response>'的可能重复
@igor - 虽然这个问题看起来有点相似，但这是一个不同的错误。我不认为这是一个骗局。
this 呢？
这是个骗子。您缺少需要从 RxJs 库导入的 toPromise 扩展方法。关于如何以通用方式执行此操作的欺骗点（欺骗与来自 RxJs 的缺少运算符 map 有关）。

标签： angular typescript async-await

【解决方案1】：

几乎是来自https://stackoverflow.com/a/41834083/1260204 的直接副本，稍作编辑，因此重点关注toPromise 而不是map。

RxJs 库有许多您可以使用的运算符，例如 toPromise、map、catch、do 等，但要使用它们，您必须引用它们所包含的文件/模块在。

Angular 网站上的教程很好地解释了如何使用 Observable<T> 以及如何创建到您想要使用的更常见方法的参考映射，例如 RxJs 库中的 toPromise。通过创建一个引用RxJs 库中更常用的运算符和类型的单个文件，您只需在要使用这些类型的地方引用该参考文件，从而不必重新添加所有运算符/类型在您想要利用它们的项目中的每个文件中。

这是一个示例文件（在本示例中名为 rxjs-operators.ts），其中包含一些更常用的方法。

// Observable class extensions
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';

// Observable operators
import 'rxjs/add/operator/toPromise'; // <=== your missing extension 
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';

在您想使用.toPromise（或任何其他方法）的文件顶部添加此行。

import './rxjs-operators';

【讨论】：