example - rxjs observable angular

La mejor manera de importar Observable desde rxjs

Question

En mi aplicación angular 2 tengo un servicio que usa la clase Observable de la biblioteca rxjs .

import { Observable } from ''rxjs'';

Por el momento, solo estoy usando Observable para poder usar la función toPromise() .

Leí en otra pregunta de StackOverflow en algún lugar que importar de esta manera y también importar de rxjs/Rx importará muchas cosas innecesarias de la biblioteca de rxjs que aumentarán los tiempos de carga de la página y / o la base de código.

Mi pregunta es, ¿cuál es la mejor manera de importar Observable para poder usar la función toPromise() sin tener que importar todo lo demás?

Answer 1

Rxjs v 6. *

Se simplificó con la versión más nueva de rxjs.

1) operadores

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

2) otros

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

En lugar de encadenarnos necesitamos canalizar. Por ejemplo

Antigua sintaxis:

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

Nueva sintaxis:

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

Nota: ¡ Algunos operadores tienen un cambio de nombre debido a colisiones de nombres con palabras reservadas de JavaScript! Éstos incluyen:

do -> tap ,

catch -> catchError

switch -> switchAll

finally -> finalize

Rxjs v 5. *

Escribo esta respuesta en parte para ayudarme a mí mismo, ya que sigo revisando documentos cada vez que necesito importar un operador. Avíseme si se puede hacer algo mejor.

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

Esto importa toda la biblioteca. Entonces no necesita preocuparse por cargar cada operador. Pero necesitas agregar Rx. Espero que el movimiento de los árboles optimice y seleccione solo las funciones necesarias (es necesario verificar) Como se mencionó en los comentarios, el movimiento de los árboles no puede ayudar. Entonces esta no es una forma optimizada.

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

O puede importar operadores individuales .

Esto optimizará su aplicación para usar solo esos archivos :

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

Esta sintaxis generalmente se usa para el Objeto principal como Rx sí mismo o Observable , etc.

Palabras clave que pueden importarse con esta sintaxis

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

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

Actualización para Angular 5

Con Angular 5, que usa rxjs 5.5.2+

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

Estos generalmente se acompañan con Observable directamente. Por ejemplo

Observable.from()
Observable.of()

Otras palabras clave similares que se pueden importar utilizando esta sintaxis:

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

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

Actualización para Angular 5

Con Angular 5, que usa rxjs 5.5.2+

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

Estos generalmente vienen en la secuencia después de que se crea el Observable. Como flatMap en este fragmento de código:

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

Otras palabras clave de este tipo que usan esta sintaxis:

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 es un alias para mergeMap por lo que debemos importar mergeMap para usar flatMap .

Nota para /add importaciones :

Solo necesitamos importar una vez en todo el proyecto. Por lo tanto, se recomienda hacerlo en un solo lugar. Si se incluyen en varios archivos y se elimina uno de ellos, la compilación fallará por razones incorrectas.

Answer 2

Una cosa que aprendí por las malas es ser consistente

Cuidado con la mezcla:

 import { BehaviorSubject } from "rxjs";

con

 import { BehaviorSubject } from "rxjs/BehaviorSubject";

Esto probablemente funcionará bien HASTA que intente pasar el objeto a otra clase (donde lo hizo al revés) y luego esto puede fallar

 (myBehaviorSubject instanceof Observable)

Falla porque la cadena del prototipo será diferente y será falsa.

No puedo pretender entender exactamente lo que está sucediendo, pero a veces me encuentro con esto y necesito cambiar al formato más largo.

Answer 3

Actualización para RxJS 6 (abril de 2018)

Ahora está perfectamente bien importar directamente desde rxjs . (Como se puede ver en Angular 6+). Importar desde rxjs/operators también está bien y en realidad ya no es posible importar operadores a nivel mundial (una de las principales razones para refactorizar rxjs 6 y el nuevo enfoque usando pipe ). Gracias a este movimiento de árboles ahora también se puede utilizar.

Código de muestra del repositorio de 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));

¿Compatibilidad con versiones anteriores para rxjs <6?

El equipo de rxjs lanzó un paquete de compatibilidad en npm que es prácticamente instalar y jugar. Con esto, todo su código rxjs 5.x debería ejecutarse sin problemas. Esto es especialmente útil ahora cuando la mayoría de las dependencias (es decir, módulos para Angular) aún no están actualizadas.