从rxjs导入Observable的最佳方法

Question

在我的angular 2应用中，我有一项使用Observable库中rxjs类的服务。

import { Observable } from 'rxjs';

目前我只使用Observable，以便我可以使用toPromise()功能。

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

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

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 - ＆gt; tap，

catch - ＆gt; catchError

switch - ＆gt; switchAll

finally - ＆gt; finalize

Rxjs v 5。*

我写这个答案部分是为了帮助自己，因为我每次需要导入操作员时都会继续检查文档。如果可以做得更好的话，请告诉我。

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

这会导入整个库。然后，您无需担心加载每个运算符。但你需要附加Rx。 我希望树摇动会优化并只挑选所需的功能（需要验证）正如评论中所提到的，树木震动无能为力。所以这不是优化方式。

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导入的注意事项：

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

Answer 2

RxJS 6更新（2018年4月）

现在可以直接从rxjs导入。 （可以在Angular 6+中看到）。从rxjs/operators导入也很好，实际上不再可能全局导入运算符（重构rxjs 6的主要原因之一和使用pipe的新方法）。由于这种树木现在也可以使用。

来自rxjs repo的示例代码：

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的向后兼容性＆lt; 6吗

rxjs团队在npm上发布了一个compatibility package，它几​​乎是安装和安装的。玩。有了这个，所有rxjs 5.x代码应该运行没有任何问题。当大多数依赖项（即Angular的模块）尚未更新时，这尤其有用。

Answer 3

我学到的一件事就是坚持不懈

注意混合：

 import { BehaviorSubject } from "rxjs";

与

 import { BehaviorSubject } from "rxjs/BehaviorSubject";

这可能会正常工作UNTIL你试图将对象传递给另一个类（你以其他方式做到了）然后这可能会失败

 (myBehaviorSubject instanceof Observable)

它失败了，因为原型链将是不同的，它将是错误的。

我不能假装准确理解发生了什么，但有时我会遇到这种情况并需要更改为更长的格式。