从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.
这将导入整个库.然后,您不必担心加载每个运算符.但是您需要附加Rx. 我希望摇树将优化并仅选择所需的功能(需要验证)如评论中所述,摇树无济于事.所以这不是优化的方式.
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('');
或者您可以导入个人运算符.
Or you can import individual operators .
这将优化您的应用程序,使其仅使用那些文件:
此语法通常用于主要对象,例如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
3) import 'rxjs/add/observable/__________';
Update for 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
4) import 'rxjs/add/operator/_________';
Update for 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 :
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屋!