Beste manier om Observable te importeren vanuit rxjs

In mijn hoekige 2-app heb ik een service die de klasse Observablegebruikt uit de bibliotheek rxjs.

import { Observable } from 'rxjs';

Op dit moment gebruik ik alleen Observablezodat ik de functie toPromise()kan gebruiken.

Ik las ergens in een andere StackOverflow-vraag dat op deze manier importeren en ook importeren uit rxjs/Rxeen heleboel onnodige dingen uit de rxjs-bibliotheek zal importeren die verhoog de laadtijden van de pagina en/of de codebasis.

Mijn vraag is, wat is de beste manier om Observablete importeren, zodat ik de functie toPromise()kan gebruiken zonder al het andere te hoeven importeren?


Antwoord 1, autoriteit 100%

Rxjs v 6.*

Het werd vereenvoudigd met een nieuwere versie van rxjs .

1) Operators

import {map} from 'rxjs/operators';

2) Anderen

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

In plaats van te ketenen, moeten we pipe . Bijvoorbeeld

Oude syntaxis :

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

Nieuwe syntaxis:

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

Opmerking:Sommige operators hebben een naamswijziging ondergaan vanwege naambotsingen met gereserveerde JavaScript-woorden! Deze omvatten:

do-> tap,

catch-> catchError

switch-> switchAll

finally-> finalize


Rxjs v 5.*

Ik schrijf dit antwoord gedeeltelijk om mezelf te helpen, aangezien ik documenten blijf controleren telkens als ik een operator moet importeren. Laat het me weten als er iets beter kan.

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

Hiermee wordt de hele bibliotheek geïmporteerd. Dan hoeft u zich geen zorgen te maken over het laden van elke operator. Maar je moet Rx toevoegen. Ik hoop dat het schudden van bomen zal optimaliseren en alleen de benodigde functies zal kiezen (moeten verifiëren)Zoals vermeld in opmerkingen, kan het schudden van bomen niet helpen. Dit is dus niet geoptimaliseerde manier.

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

Of u kunt individueleoperators importeren.

Hiermee wordt uw app geoptimaliseerd om alleen die bestanden te gebruiken:

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

Deze syntaxis wordt meestal gebruikt voor het hoofdobject zoals Rxzelf of Observableenz.,

Trefwoorden die kunnen worden geïmporteerd met deze syntaxis

Observable, Observer, BehaviorSubject, Subject, ReplaySubject

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

Update voor Angular 5

Met Angular 5, die rxjs 5.5.2+ gebruikt

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

Deze gaan meestal direct vergezeld van Observable. Bijvoorbeeld

Observable.from()
Observable.of()

Andere dergelijke trefwoorden die kunnen worden geïmporteerd met behulp van deze syntaxis:

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

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

Update voor Angular 5

Met Angular 5, die rxjs 5.5.2+ gebruikt

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

Deze komen meestal in de stream nadat de Observable is gemaakt. Vind flatMapleuk in dit codefragment:

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

Andere dergelijke zoekwoorden die deze syntaxis gebruiken:

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:
flatMapis een alias voor mergeMap, dus we moeten mergeMapimporteren om flatMapte gebruiken.


Opmerking voor /addimports:

We hoeven in het hele project maar één keer te importeren. Dus het is aan te raden om het op één plek te doen. Als ze in meerdere bestanden zijn opgenomen en een ervan wordt verwijderd, mislukt de build om verkeerde redenen.


Antwoord 2, autoriteit 15%

Update voor RxJS 6 (april 2018)

Het is nu prima in orde om rechtstreeks vanuit rxjste importeren. (Zoals te zien is in Angular 6+). Importeren vanuit rxjs/operatorsis ook prima en het is eigenlijk niet langer mogelijk om operators wereldwijd te importeren (een van de belangrijkste redenen voor het refactoring van rxjs 6en de nieuwe aanpak met behulp van pipe). Hierdoor kan nu ook gebruik worden gemaakt van bomenschudden.

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

Achterwaartse compatibiliteit voor rxjs < 6?

rxjs-team heeft een compatibiliteitspakketuitgebracht op npm dat zo’n beetje install & Speel. Hiermee zou al je rxjs 5.xcode probleemloos moeten werken. Dit is vooral handig nu de meeste afhankelijkheden (d.w.z. modules voor Angular) nog niet zijn bijgewerkt.


Antwoord 3, autoriteit 2%

Eén ding dat ik op de harde manier heb geleerd, is consistent zijn

Pas op met mixen:

import { BehaviorSubject } from "rxjs";

met

import { BehaviorSubject } from "rxjs/BehaviorSubject";

Dit zal waarschijnlijk prima werken TOTDAT je het object probeert door te geven aan een andere klasse (waar je het andersom hebt gedaan) en dan kan dit mislukken

(myBehaviorSubject instanceof Observable)

Het mislukt omdat de prototypeketen anders zal zijn en onwaar zal zijn.

Ik kan niet doen alsof ik precies begrijp wat er gebeurt, maar soms kom ik dit tegen en moet ik overschakelen naar het langere formaat.

Other episodes