【问题标题】:Best way to import Observable from rxjs从 rxjs 导入 Observable 的最佳方法
【发布时间】:2017-07-11 15:29:25
【问题描述】:

在我的 Angular 2 应用程序中,我有一个使用 rxjs 库中的 Observable 类的服务。

import { Observable } from 'rxjs';

目前我只是使用Observable,以便可以使用toPromise() 函数。

我在另一个 StackOverflow 问题中读到,以这种方式导入并从 rxjs/Rx 导入会从 rxjs 库导入大量不必要的东西,这将增加页面加载时间和/或代码库。

我的问题是,导入Observable 的最佳方法是什么,这样我就可以使用toPromise() 函数而无需导入其他所有内容?

【问题讨论】:

  • import {Observable} from 'rxjs/Observable'; 将导入 Observable,但如果您使用 Promise,则无需全部导入...toPromise 无需它即可。
  • 我需要自己导入什么才能仅使用toPromise?我正在使用 Observable,我应该在问题中澄清这一点。这真的是两个独立的问题。
  • 如果你想要承诺import 'rxjs/add/operator/toPromise';看看angular.io/docs/ts/latest/tutorial/toh-pt6.html这应该可以帮助你:)
  • 我会调查的。干杯并感谢您抽出宝贵时间分享!
  • 没问题!快乐编码! :)

标签: angular typescript rxjs angular2-observables


【解决方案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.*

我写这个答案部分是为了帮助自己,因为我每次需要导入 operator 时都会检查文档。让我知道是否可以做得更好。

1)import { Rx } from 'rxjs/Rx';

这会导入整个库。然后你就不用担心加载每个 operator 了。但是你需要附加 Rx。 我希望 tree-shaking 能够优化并只选择需要的功能(需要验证) 正如 cmets 中提到的,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 更新

使用 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 创建后进入流中。就像这段代码sn-p中的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

平面地图flatMapmergeMap 的别名,所以我们需要导入mergeMap 来使用flatMap


/add 导入注意事项

我们只需要在整个项目中导入一次。所以建议在一个地方做。如果它们包含在多个文件中,并且其中一个被删除,则构建将因错误原因而失败。

【讨论】:

  • Tree-shaking 在这里无法优化,因为它依赖于导出和导入定义的符号名称,并且 RxJS 操作符模块不导出任何内容,而是更改全局状态。 see
  • 我认为您必须像 import { map } from 'rxjs/operators/map } 一样一一导入任何运算符;从 'rxjs/operators/filter } 导入 { filter }
  • groupBy 在 Angular 5+ 上不适合我,但其他人可以。
  • 很好的答案。我不知道 /add/operator/operators 导入之间的区别。像魅力一样工作。
  • 很酷,但是文档中的哪个位置?我发现 Rxjs 文档很难使用。
【解决方案2】:

RxJS 6 更新(2018 年 4 月)

现在可以直接从rxjs 导入。 (可以在 Angular 6+ 中看到)。从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

rxjs 团队在 npm 上发布了一个compatibility package,它几乎可以安装和播放。有了这个,您的所有rxjs 5.x 代码应该可以毫无问题地运行。当大多数依赖项(即 Angular 的模块)尚未更新时,这现在特别有用。

【讨论】:

【解决方案3】:

我从艰难中学到的一件事就是保持一致

注意混合:

 import { BehaviorSubject } from "rxjs";

 import { BehaviorSubject } from "rxjs/BehaviorSubject";

这可能会正常工作,直到您尝试将对象传递给另一个类(您以另一种方式进行)然后这可能会失败

 (myBehaviorSubject instanceof Observable)

它失败了,因为原型链会不同,它会是假的。

我无法假装完全理解正在发生的事情,但有时我会遇到这种情况,需要更改为更长的格式。

【讨论】:

  • 如果有人可以更好地解释这一点,请回复:-)
  • 例如,Visual Studio 很乐意从 "rxjs" 导入并将定义合并在一起,看起来你最好以“长”格式单独执行它们。
猜你喜欢
  • 1970-01-01
  • 2017-07-17
  • 1970-01-01
  • 2021-01-01
  • 1970-01-01
  • 2020-12-28
  • 1970-01-01
  • 2018-11-18
  • 2019-03-07
相关资源
最近更新 更多