从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屋！
