Meilleur moyen d'importer un Observable depuis rxjs

Question

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

import { Observable } from 'rxjs';

Pour le moment, j'utilise simplement Observable afin que je puisse utiliser le toPromise() fonction.

J'ai lu quelque part dans une autre question StackOverflow que l'importation de cette manière et également l'importation à partir de rxjs/Rx importera tout un tas de choses inutiles de l'Union européenne. rxjs qui augmentera le temps de chargement des pages et/ou la base de code.

Ma question est la suivante : quelle est la meilleure façon d'importer Observable afin que je puisse utiliser le toPromise() sans devoir importer tout le reste ?

Answer 1

Rxjs v 6.*

Il a été simplifié avec la nouvelle version de rxjs.

1) Opérateurs

import {map} from 'rxjs/operators';

2) Autres

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

Au lieu de chaînage, nous avons besoin de pipe. Par exemple

Ancienne syntaxe :

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

Nouvelle syntaxe :

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

Note : Certains opérateurs changent de nom en raison de collisions de noms avec des mots réservés JavaScript ! Il s'agit notamment de :

do -> tap ,

catch -> catchError

switch -> switchAll

finally -> finalize

---

Rxjs v 5.*

J'écris cette réponse en partie pour m'aider moi-même, car je ne cesse de consulter la documentation chaque fois que j'ai besoin d'importer un opérateur. Faites-moi savoir si quelque chose peut être mieux fait.

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

Cela importe toute la bibliothèque. Vous n'avez donc pas à vous soucier du chargement de chaque opérateur. Mais vous devez ajouter Rx. J'espère que le tree-shaking optimisera et choisira uniquement les fonctions nécessaires (à vérifier). Comme mentionné dans les commentaires, le secouage des arbres ne peut pas aider. Ce n'est donc pas une solution optimisée.

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

---

Ou vous pouvez importer individuel opérateurs .

Cela optimisera votre application pour n'utiliser que ces fichiers. :

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

Cette syntaxe est généralement utilisée pour les objets principaux tels que Rx lui-même ou Observable etc,

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

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

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

Mise à jour pour Angular 5

avec Angular 5, qui utilise rxjs 5.5.2+.

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

Ils sont généralement accompagnés d'Observable directement. Par exemple

Observable.from()
Observable.of()

D'autres mots-clés de ce type peuvent être importés à l'aide de cette syntaxe :

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

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

Mise à jour pour Angular 5

avec Angular 5, qui utilise rxjs 5.5.2+.

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

Ils arrivent généralement dans le flux après la création de l'Observable. Comme flatMap dans cet extrait de code :

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

D'autres mots-clés de ce type utilisent 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 un alias de mergeMap Nous devons donc importer mergeMap à utiliser flatMap .

---

Note pour /add importations :

Nous n'avons besoin d'importer qu'une seule fois dans tout le projet. Il est donc conseillé de le faire à un seul endroit. S'ils sont inclus dans plusieurs fichiers, et que l'un d'entre eux est supprimé, la construction échouera pour de mauvaises raisons.

Answer 2

Mise à jour pour RxJS 6 (avril 2018)

Il est maintenant parfaitement possible d'importer directement à partir de rxjs . (Comme on peut le voir dans Angular 6+). Importation depuis rxjs/operators convient également et il n'est plus possible d'importer des opérateurs de manière globale (l'une des principales raisons du remaniement de l'interface de l'utilisateur). rxjs 6 et la nouvelle approche utilisant pipe ). Grâce à cela, le treeshaking peut maintenant être utilisé également.

Exemple de code provenant du dépôt 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));

Rétrocompatibilité pour rxjs < 6 ?

L'équipe rxjs a publié une paquet de compatibilité sur npm qui est à peu près installable et jouable. Avec cela, tous vos rxjs 5.x Le code devrait s'exécuter sans problème. Ceci est particulièrement utile lorsque la plupart des dépendances (c'est-à-dire les modules pour Angular) ne sont pas encore mises à jour.

Answer 3

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

Attention aux mélanges :

 import { BehaviorSubject } from "rxjs";

avec

 import { BehaviorSubject } from "rxjs/BehaviorSubject";

Cela fonctionnera probablement très bien jusqu'à ce que vous essayiez de passer l'objet à une autre classe (où vous l'avez fait de l'autre façon) et alors cela peut échouer.

 (myBehaviorSubject instanceof Observable)

Elle échoue parce que la chaîne de prototypes sera différente et qu'elle sera fausse.

Je ne prétends pas comprendre exactement ce qui se passe, mais il m'arrive de rencontrer ce problème et de devoir passer au format plus long.