Der beste Weg, um Observable aus rxjs zu importieren

In meiner Angular 2-App habe ich einen Dienst, der die ObservableKlasse aus der rxjsBibliothek verwendet.

import { Observable } from 'rxjs';

Im Moment benutze ich nur, Observabledamit ich die toPromise()Funktion nutzen kann.

Ich habe irgendwo in einer anderen StackOverflow-Frage gelesen, dass beim Importieren auf diese Weise und auch beim Importieren aus rxjs/Rxeine ganze Menge unnötiger Inhalte aus der rxjsBibliothek importiert werden , wodurch sich die Ladezeiten der Seiten und / oder die Codebasis erhöhen.

Meine Frage ist, wie Observableich am besten importieren kann, damit ich die toPromise()Funktion verwenden kann, ohne alles andere importieren zu müssen.

Rxjs v 6. *

Es wurde mit einer neueren Version von rxjs vereinfacht.

1) Betreiber

import {map} from 'rxjs/operators';

2) Andere

import {Observable,of, from } from 'rxjs';

Anstatt zu verketten, müssen wir pfeifen. Zum Beispiel

Alte Syntax:

source.map().switchMap().subscribe()

Neue Syntax:

source.pipe(map(), switchMap()).subscribe()

Hinweis: Einige Operatoren haben eine Namensänderung aufgrund von Namenskollisionen mit reservierten JavaScript-Wörtern! Diese beinhalten:

do-> tap,

catch -> catchError

switch -> switchAll

finally -> finalize

Rxjs v 5. *

Ich schreibe diese Antwort teilweise, um mir selbst zu helfen, da ich jedes Mal, wenn ich einen Operator importieren muss, die Dokumente überprüfe. Lassen Sie mich wissen, ob etwas besser gemacht werden kann.

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

Dadurch wird die gesamte Bibliothek importiert. Dann müssen Sie sich nicht um das Laden jedes Bedieners kümmern. Sie müssen jedoch Rx anhängen. Ich hoffe, dass das Baumschütteln optimiert wird und nur die benötigten Funktionen auswählt (muss überprüft werden). Wie in den Kommentaren erwähnt, kann das Baumschütteln nicht helfen. Das ist also nicht optimiert.

public cache = new Rx.BehaviorSubject('');

Oder Sie können einzelne Operatoren importieren .

Dadurch wird Ihre App so optimiert, dass nur die folgenden Dateien verwendet werden :

2) import { _______ } from 'rxjs/_________';

Diese Syntax wird normalerweise für Hauptobjekte wie sich Rxselbst oder Observableusw. verwendet.

Schlüsselwörter, die mit dieser Syntax importiert werden können

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

3) import 'rxjs/add/observable/__________';

Update für Angular 5

Mit Angular 5, das rxjs 5.5.2+ verwendet

import { empty } from 'rxjs/observable/empty';
import { concat} from 'rxjs/observable/concat';

Diese werden in der Regel direkt von Observable begleitet. Zum Beispiel

Observable.from()
Observable.of()

Andere solche Schlüsselwörter, die mit dieser Syntax importiert werden können:

concat, defer, empty, forkJoin, from, fromPromise, if, interval, merge, of, 
range, throw, timer, using, zip

4) import 'rxjs/add/operator/_________';

Update für Angular 5

Mit Angular 5, das rxjs 5.5.2+ verwendet

import { filter } from 'rxjs/operators/filter';
import { map } from 'rxjs/operators/map';

Diese kommen normalerweise in den Stream, nachdem das Observable erstellt wurde. Wie flatMapin diesem Code-Snippet:

Observable.of([1,2,3,4])
          .flatMap(arr => Observable.from(arr));

Andere solche Schlüsselwörter, die diese Syntax verwenden:

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 : flatMapist ein Alias ​​für, mergeMapalso müssen wir importieren, um es mergeMapzu verwenden flatMap.

Hinweis für /addImporte :

Wir müssen nur einmal im gesamten Projekt importieren. Es wird daher empfohlen, dies an einem einzigen Ort zu tun. Wenn sie in mehreren Dateien enthalten sind und eine davon gelöscht wird, schlägt der Build aus falschen Gründen fehl.

Update für RxJS 6 (April 2018)

Es ist jetzt vollkommen in Ordnung, direkt von zu importieren rxjs. (Wie in Angular 6+ zu sehen ist). Der Import von rxjs/operatorsist ebenfalls in Ordnung und es ist tatsächlich nicht mehr möglich, Operatoren global zu importieren (einer der Hauptgründe für das Refactoring rxjs 6und den neuen Ansatzpipe ). Dank dieses Baumshakes kann nun auch verwendet werden.

Beispielcode aus rxjs repo:

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));

Abwärtskompatibilität für rxjs <6?

Das rxjs-Team hat auf npm ein Kompatibilitätspaket veröffentlicht, das so ziemlich install & play ist. Damit rxjs 5.xsollte Ihr gesamter Code ohne Probleme ausgeführt werden. Dies ist jetzt besonders nützlich, wenn die meisten Abhängigkeiten (dh Module für Angular) noch nicht aktualisiert wurden.

Eine Sache, die ich auf die harte Tour gelernt habe, ist konsequent zu sein

Achten Sie auf das Mischen:

 import { BehaviorSubject } from "rxjs";

mit

 import { BehaviorSubject } from "rxjs/BehaviorSubject";

Dies funktioniert wahrscheinlich einwandfrei, BIS Sie versuchen, das Objekt an eine andere Klasse zu übergeben (wo Sie es anders gemacht haben), und dies kann dann fehlschlagen

 (myBehaviorSubject instanceof Observable)

Es schlägt fehl, weil die Prototypenkette anders und falsch ist.

Ich kann nicht so tun, als würde ich genau verstehen, was passiert, aber manchmal stoße ich darauf und muss zum längeren Format wechseln.