从rxjs导入Observable的最佳方法

Question

在我的角度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- > tap,

catch - > catchError

switch - > switchAll

finally - > 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的向后兼容性<6？

rxjs团队在npm上发布了一个兼容包,几乎可以安装和播放.有了这个,你的所有rxjs 5.x代码都应该没有任何问题.现在,当大多数依赖项(即Angular的模块)尚未更新时,这尤其有用.