从 rxjs 导入 Observable 的最佳方法 [英] Best way to import Observable from rxjs
问题描述
在我的 angular 2 应用程序中,我有一个使用 rxjs
库中的 Observable
类的服务.
In my angular 2 app I have a service that uses the Observable
class from the rxjs
library.
import { Observable } from 'rxjs';
目前我只是使用 Observable
以便我可以使用 toPromise()
函数.
At the moment I am just using Observable
so that I can use the toPromise()
function.
我在另一个 StackOverflow 问题中读到,以这种方式导入以及从 rxjs/Rx
导入会从 rxjs
库中导入大量不必要的东西增加页面加载时间和/或代码库.
I read in another StackOverflow question somewhere that importing in this way and also importing from rxjs/Rx
will import a whole lot of unnecessary stuff from the rxjs
library that will increase the page load times and/or the code base.
我的问题是,导入 Observable
以便我可以使用 toPromise()
函数而无需导入其他所有内容的最佳方法是什么?
My question is, what is the best way to import Observable
so I can use the toPromise()
function without having to import everything else?
推荐答案
Rxjs v 6.*
使用较新版本的 rxjs 简化了它.
Rxjs v 6.*
It got simplified with newer version of rxjs .
import {map} from 'rxjs/operators';
2) 其他
import {Observable,of, from } from 'rxjs';
我们需要管道而不是链接.例如
Instead of chaining we need to pipe . For example
旧语法:
source.map().switchMap().subscribe()
新语法:
source.pipe(map(), switchMap()).subscribe()
注意:由于名称与 JavaScript 保留字发生冲突,一些运算符的名称发生了变化!其中包括:
Note: Some operators have a name change due to name collisions with JavaScript reserved words! These include:
do
-> tap
,
catch
-> catchError
switch
-> switchAll
finally
-> finalize
我写这个答案部分是为了帮助自己,因为我每次需要导入操作符时都会检查文档.如果有什么可以做得更好的方法,请告诉我.
I am writing this answer partly to help myself as I keep checking docs everytime I need to import an operator . Let me know if something can be done better way.
这会导入整个库.那么你就不用担心加载每个 operator 了.但是你需要附加 Rx.我希望 tree-shaking 能够优化并只选择需要的函数(需要验证) 正如评论中提到的,tree-shaking 无济于事.所以这不是优化的方式.
This imports the entire library. Then you don't need to worry about loading each operator . But you need to append Rx. I hope tree-shaking will optimize and pick only needed funcionts( need to verify ) As mentioned in comments , tree-shaking can not help. So this is not optimized way.
public cache = new Rx.BehaviorSubject('');
<小时>
或者您可以导入单个运算符.
这将优化您的应用以仅使用这些文件:
这种语法通常用于主对象,如Rx
本身或Observable
等,
This syntax usually used for main Object like Rx
itself or Observable
etc.,
可以用这种语法导入的关键字
Keywords which can be imported with this syntax
Observable, Observer, BehaviorSubject, Subject, ReplaySubject
3) import 'rxjs/add/observable/__________';
Angular 5 的更新
使用 Angular 5,它使用 rxjs 5.5.2+
With Angular 5, which uses rxjs 5.5.2+
import { empty } from 'rxjs/observable/empty';
import { concat} from 'rxjs/observable/concat';
这些通常直接与 Observable 一起使用.例如
These are usually accompanied with Observable directly. For example
Observable.from()
Observable.of()
可以使用此语法导入的其他此类关键字:
Other such keywords which can be imported using this syntax:
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+
With Angular 5, which uses rxjs 5.5.2+
import { filter } from 'rxjs/operators/filter';
import { map } from 'rxjs/operators/map';
这些通常在创建 Observable 之后进入流中.就像这段代码片段中的 flatMap
:
These usually come in the stream after the Observable is created. Like flatMap
in this code snippet:
Observable.of([1,2,3,4])
.flatMap(arr => Observable.from(arr));
使用此语法的其他此类关键字:
Other such keywords using this syntax:
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
.
FlatMap:
flatMap
is alias to mergeMap
so we need to import mergeMap
to use flatMap
.
/add
导入的注意事项:
Note for /add
imports :
我们只需要在整个项目中导入一次.所以建议在一个地方做.如果它们包含在多个文件中,并且其中一个被删除,则构建将因错误原因而失败.
We only need to import once in whole project. So its advised to do it at a single place. If they are included in multiple files, and one of them is deleted, the build will fail for wrong reasons.
这篇关于从 rxjs 导入 Observable 的最佳方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!