In mijn hoekige 2-app heb ik een service die de klasse Observable
gebruikt uit de bibliotheek rxjs
.
import { Observable } from 'rxjs';
Op dit moment gebruik ik alleen Observable
zodat ik de functie toPromise()
kan gebruiken.
Ik las ergens in een andere StackOverflow-vraag dat op deze manier importeren en ook importeren uit rxjs/Rx
een 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 Observable
te 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 Rx
zelf of Observable
enz.,
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 flatMap
leuk 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:
flatMap
is een alias voor mergeMap
, dus we moeten mergeMap
importeren om flatMap
te gebruiken.
Opmerking voor /add
imports:
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 rxjs
te importeren. (Zoals te zien is in Angular 6+). Importeren vanuit rxjs/operators
is ook prima en het is eigenlijk niet langer mogelijk om operators wereldwijd te importeren (een van de belangrijkste redenen voor het refactoring van rxjs 6
en 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.x
code 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.