77 votes

Meilleur moyen d'importer Observable à partir de rxjs

Dans mon angulaire 2 app, j'ai un service qui utilise l' Observable classe de l' rxjs bibliothèque.

import { Observable } from 'rxjs';

Pour le moment je suis juste en utilisant Observable afin que je puisse utiliser l' toPromise() fonction.

J'ai lu dans un autre StackOverflow question quelque part que l'importation de cette manière, et aussi l'importation à partir d' rxjs/Rx d'importation d'un tas de trucs inutiles de l' rxjs librairie qui va augmenter le temps de chargement des pages et/ou de la base de code.

Ma question est, quelle est la meilleure façon d'importer Observable si je peux utiliser l' toPromise() fonction sans avoir à importer tout le reste?

134voto

Vamshi Points 5473

Rxjs v 6.*

Il s'est simplifié avec la version la plus récente de rxjs .

1) les Opérateurs

import {map} from 'rxjs/operators';

2) les Autres

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

Au lieu d'enchaîner nous avons besoin de pipe . Par exemple

L'ancienne syntaxe :

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

Nouvelle Syntaxe:

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

Remarque: Certains opérateurs ont un changement de nom en raison de conflits de noms avec JavaScript mots réservés! Elles comprennent:

do -> tap,

catch -> catchError

switch -> switchAll

finally -> finalize


Rxjs v 5.*

Je suis en train d'écrire cette réponse, en partie pour aider à moi-même comme je l'ai garder le contrôle de docs à chaque fois que j'ai besoin d'importer un opérateur . Laissez-moi savoir si quelque chose peut être fait de mieux.

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

Cette importations de l'ensemble de la bibliothèque. Ensuite, vous n'avez pas besoin de vous soucier de chargement de chaque opérateur . Mais vous devez ajouter Rx. J'espère que l'arbre qui tremble permettra d'optimiser et de choisir seulement nécessaire funcionts( besoin de vérifier ) , Comme mentionné dans les commentaires , l'arbre qui tremble ne peut pas aider. Ce n'est donc pas optimisé.

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

Ou vous pouvez importer individuels des opérateurs .

Cela permettra d'Optimiser votre application pour utiliser uniquement les fichiers :

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

Cette syntaxe utilisée habituellement pour Objet principal, comme Rx lui-même ou Observable etc.,

Mots-clés qui peuvent être importés avec cette syntaxe

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

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

Mise à jour Angulaire 5

Angulaire 5, qui utilise rxjs 5.5.2+

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

Ce sont généralement de pair avec Observables directement. Par exemple

Observable.from()
Observable.of()

D'autres mots-clés qui peuvent être importés en utilisant cette syntaxe:

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

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

Mise à jour Angulaire 5

Angulaire 5, qui utilise rxjs 5.5.2+

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

Ils proviennent généralement dans les cours d'eau après l'Observable est créé. Comme flatMap de ce morceau de code:

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

D'autres mots clés en utilisant cette syntaxe:

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 est alias mergeMap donc nous avons besoin d'importer mergeMap utilisation flatMap.


Note pour /add importations :

Nous avons seulement besoin d'importer une fois dans l'ensemble du projet. Donc, son conseillé de le faire à un seul endroit. Si elles sont incluses dans plusieurs fichiers, et l'un d'eux est supprimé, la compilation échouera pour les mauvaises raisons.

22voto

Enn Points 1562

Mise à jour pour RxJS 6 (avril 2018)

Il est désormais parfaitement bien à l'importation directement à partir de rxjs. (Comme on peut le voir dans Angulaire 6+). Importation à partir d' rxjs/operators est aussi très bien et il est en réalité n'est plus possible d'importer les opérateurs à l'échelle mondiale (l'une des principales raisons de refactoring rxjs 6 et la nouvelle approche à l'aide de pipe). Grâce à cette treeshaking peut maintenant être utilisé.

Exemple de code à partir 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));

La compatibilité descendante pour les rxjs < 6?

rxjs équipe a publié un package de compatibilité sur la ngp qui est assez bien installer et jouer. Avec cette à toutes vos rxjs 5.x code devrait fonctionner sans aucun problème. Ceci est particulièrement utile lorsque la plupart des dépendances (c'est à dire les modules Angulaire) ne sont pas encore mis à jour.

3voto

Simon_Weaver Points 31141

Une chose que j'ai appris à la dure est d'être cohérent

Watch out pour le mélange:

 import { BehaviorSubject } from "rxjs";

avec

 import { BehaviorSubject } from "rxjs/BehaviorSubject";

Ce sera probablement très bien fonctionner JUSQU'à ce que vous essayez de passer de l'objet à une autre classe (où vous l'avez fait dans l'autre sens) et puis cela peut échouer

 (myBehaviorSubject instanceof Observable)

Il échoue parce que la chaîne de prototype sera différent, et il sera faux.

Je ne peux pas faire semblant de comprendre exactement ce qui se passe, mais parfois je tombe sur ce et de la nécessité de changer le format plus long.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X