从 rxjs 导入 Observable 的最佳方法

Question

在我的 Angular 2 应用程序中，我有一项服务使用来自 rxjs 库的 Observable 类。

 import { Observable } from 'rxjs';

目前我只是在使用 Observable 这样我就可以使用 toPromise() 功能。

我在另一个 StackOverflow 问题中读到，以这种方式导入并从 rxjs/Rx 导入会从 rxjs 库中导入大量不必要的东西，这将增加页面加载时间和/或代码库。

我的问题是，导入 Observable 的最佳方法是什么，这样我就可以使用 toPromise() 函数而无需导入其他所有内容？

原文由 Danoram 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Rxjs v 6.*

使用较新版本的 rxjs 简化了它。

1) 运算符

import {map} from 'rxjs/operators';

2) 其他

import {Observable,of, from } from 'rxjs';

我们需要管道而不是链接。例如

旧语法：

 source.map().switchMap().subscribe()

新语法：

 source.pipe(map(), switchMap()).subscribe()

注意： 由于与 JavaScript 保留字的名称冲突，一些运算符的名称发生了变化！这些包括：

do -> tap ,

catch -> catchError

switch -> switchAll

finally -> finalize

---

Rxjs v 5.*

我写这个答案部分是为了帮助自己，因为我每次需要导入 operator 时都会检查文档。让我知道是否可以做得更好。

1) import { Rx } from 'rxjs/Rx' ;

这将导入整个库。然后你就不用担心加载每个 operator 了。但是你需要附加 Rx。我希望 tree-shaking 能够优化并只选择需要的功能（需要验证）正如评论中提到的那样，tree-shaking 无济于事。所以这不是优化的方式。

 public cache = new Rx.BehaviorSubject('');

---

或者您可以导入 单个 运算符。

这将优化您的应用程序以仅使用这些文件：

2) import { _______ } from 'rxjs/_________';

此语法通常用于主对象，如 Rx 本身或 Observable 等，

可以使用此语法导入的关键字

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

3) import 'rxjs/add/observable/__________';

Angular 5 的更新

使用 Angular 5，它使用 rxjs 5.5.2+

 import { empty } from 'rxjs/observable/empty';
import { concat} from 'rxjs/observable/concat';

这些通常直接与 Observable 一起使用。例如

Observable.from()
Observable.of()

可以使用此语法导入的其他此类关键字：

 concat, defer, empty, forkJoin, from, fromPromise, if, interval, merge, of,
range, throw, timer, using, zip

4) import 'rxjs/add/operator/_________';

Angular 5 的更新

使用 Angular 5，它使用 rxjs 5.5.2+

 import { filter } from 'rxjs/operators/filter';
import { map } from 'rxjs/operators/map';

这些通常在创建 Observable 之后进入流中。就像 flatMap 在这个代码片段中：

 Observable.of([1,2,3,4])
          .flatMap(arr => Observable.from(arr));

使用此语法的其他此类关键字：

 audit, buffer, catch, combineAll, combineLatest, concat, count, debounce, delay,
distinct, do, every, expand, filter, finally, find , first, groupBy,
ignoreElements, isEmpty, last, let, map, max, merge, mergeMap, min, pluck,
publish, race, reduce, repeat, scan, skip, startWith, switch, switchMap, take,
takeUntil, throttle, timeout, toArray, toPromise, withLatestFrom, zip

FlatMap : flatMap 是 mergeMap 的别名，所以我们需要导入 mergeMap 来使用 flatMap

---

/add 进口注意事项：

我们只需要在整个项目中导入一次。所以建议在一个地方做。如果它们包含在多个文件中，并且其中一个被删除，则构建将因错误原因而失败。

原文由 Vamshi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

RxJS 6 更新（2018 年 4 月）

现在可以直接从 rxjs 导入。 （可以在 Angular 6+ 中看到）。从 rxjs/operators 导入也可以，实际上不再可能在全局范围内导入操作符（重构 rxjs 6 和使用 pipe ） .多亏了这种 treeshaking，现在也可以使用了。

来自 rxjs 存储库的示例代码：

 import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';

range(1, 200)
  .pipe(filter(x => x % 2 === 1), map(x => x + x))
  .subscribe(x => console.log(x));

rxjs < 6 的向后兼容性？

rxjs 团队在 npm 上发布了一个 兼容包，几乎可以安装和播放。有了这个，你所有的 rxjs 5.x 代码应该可以毫无问题地运行。当大多数依赖项（即 Angular 的模块）尚未更新时，这现在特别有用。

原文由 Enn 发布，翻译遵循 CC BY-SA 4.0 许可协议