从 rxjs 导入 Observable 的最佳方式
Best way to import Observable from rxjs
在我的 angular 2 应用程序中,我有一项服务使用 rxjs
库中的 Observable
class。
import { Observable } from 'rxjs';
目前我正在使用 Observable
以便我可以使用 toPromise()
功能。
我在某个地方读到另一个 Whosebug 问题,以这种方式导入以及从 rxjs/Rx
导入会从 rxjs
库中导入大量不必要的东西,这会增加页面加载时间 and/or 代码库。
我的问题是,导入 Observable
的最佳方法是什么,这样我就可以使用 toPromise()
函数而无需导入其他所有内容?
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'
;
这将导入整个库。那么你就不用担心加载每个 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
With 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
With 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
是 mergeMap
的别名,因此我们需要导入 mergeMap
才能使用 flatMap
。
/add
进口注意事项:
整个项目只需要导入一次。所以建议在一个地方做。如果它们包含在多个文件中,并且其中一个被删除,构建将因错误原因而失败。
我通过艰难的方式学到的一件事就是保持一致
注意混合:
import { BehaviorSubject } from "rxjs";
与
import { BehaviorSubject } from "rxjs/BehaviorSubject";
这可能会很好地工作,直到您尝试将对象传递给另一个 class(您以另一种方式传递)然后这可能会失败
(myBehaviorSubject instanceof Observable)
它失败了,因为原型链会不同,它会是假的。
我无法假装完全理解正在发生的事情,但有时我 运行 陷入其中并需要更改为更长的格式。
RxJS 6 更新(2018 年 4 月)
现在可以直接从 rxjs
导入。 (在Angular6+中可以看出)。从 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 上发布了一个 compatibility package,几乎可以安装和播放。有了这个,您的所有 rxjs 5.x
代码应该 运行 没有任何问题。当大多数依赖项(即 Angular 的模块)尚未更新时,这在现在特别有用。
在我的 angular 2 应用程序中,我有一项服务使用 rxjs
库中的 Observable
class。
import { Observable } from 'rxjs';
目前我正在使用 Observable
以便我可以使用 toPromise()
功能。
我在某个地方读到另一个 Whosebug 问题,以这种方式导入以及从 rxjs/Rx
导入会从 rxjs
库中导入大量不必要的东西,这会增加页面加载时间 and/or 代码库。
我的问题是,导入 Observable
的最佳方法是什么,这样我就可以使用 toPromise()
函数而无需导入其他所有内容?
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'
;
这将导入整个库。那么你就不用担心加载每个 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
With 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
With 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
是 mergeMap
的别名,因此我们需要导入 mergeMap
才能使用 flatMap
。
/add
进口注意事项:
整个项目只需要导入一次。所以建议在一个地方做。如果它们包含在多个文件中,并且其中一个被删除,构建将因错误原因而失败。
我通过艰难的方式学到的一件事就是保持一致
注意混合:
import { BehaviorSubject } from "rxjs";
与
import { BehaviorSubject } from "rxjs/BehaviorSubject";
这可能会很好地工作,直到您尝试将对象传递给另一个 class(您以另一种方式传递)然后这可能会失败
(myBehaviorSubject instanceof Observable)
它失败了,因为原型链会不同,它会是假的。
我无法假装完全理解正在发生的事情,但有时我 运行 陷入其中并需要更改为更长的格式。
RxJS 6 更新(2018 年 4 月)
现在可以直接从 rxjs
导入。 (在Angular6+中可以看出)。从 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 上发布了一个 compatibility package,几乎可以安装和播放。有了这个,您的所有 rxjs 5.x
代码应该 运行 没有任何问题。当大多数依赖项(即 Angular 的模块)尚未更新时,这在现在特别有用。