Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Evitando doble subscribe

5/25
Recursos

Uno de los principales problemas de los observables es el Callback Hell. La anidaci贸n de N cantidad de suscripciones, una dentro de la otra, vuelve tu c贸digo muy dif铆cil de mantener y de leer.

Solucionando problemas de Callbacks

Utilizando promesas, puedes resolver esto f谩cilmente con async/await. Pero si hablamos de observables, nuestra mejor amiga, la librer铆a RxJS, llega para aportar su soluci贸n.

Un ejemplo com煤n de esta problem谩tica en Angular es como la siguiente:

readAndUpdate(): void {
  // Ejemplo de callback hell
  this.apiService.getProduct(1)
    .subscribe(res => {
      this.apiService.updateProduct(1, { name: 'Nuevo nombre del producto' })
        .subscribe(res2 => {
          // ...
        });
    });
}

Donde se est谩 realizando una petici贸n para la lectura de un producto e inmediatamente se est谩 actualizando el mismo. Generando un subscribe dentro de otro.
Tal vez, hasta dos subscribe es aceptable, pero no se recomienda continuar con esa estructura de c贸digo y es posible resolverlo de la siguiente manera.

import { switchMap } from 'rxjs/operators';

readAndUpdate(): void {
  // Soluci贸n callback hell
  this.apiService.getProduct(1)
    .pipe(
      switchMap(products => this.apiService.updateProduct(1, { name: 'Nuevo nombre' }) )
    )
    .subscribe(res => {
      // Producto actualizado
    });
}

Importando switchMap desde rxjs/operators, lo que hace esta funci贸n es recibir el dato que emite un observable, y utilizarlo inmediatamente como input para el segundo. De esta manera, el c贸digo queda m谩s limpio y profesional.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 8

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Aqu铆 un peque帽o aporte adicional al funcionamiento del SwitchMap(), por Alan Buscaglia maestro del curso de Typescript con Angular

RxJS - SwitchMap() | Gentleman Programming

Recomiendo mucho ver el siguiente video para profundizar un poco mas en las estrategias para aplanar subscriptions de RXJS

https://www.youtube.com/watch?v=sxjpUNRU_tI&list=PL4vWncexIMYuvT5oCCGpShrRoM0hizLky&index=2

Muy buen curso del profe.Apoyemoslo.

En mi trabajo tengo muchas situaciones as铆. Vengo aprendiendo RxJS con el paso del tiempo a como el proyecto me lo va requiriendo. Y no conoc铆a que era una mala pr谩ctica el tener un susbscribe dentro de otro.

Gracias!!

Es cuesti贸n de gustos, pero no me gusta tener c贸digo HTML al interior de un componente.

@Component({
  selector: 'app-category',
  template: `<app-products
    [products]="products"
    (loadMore)="onLoadMore()"
  ></app-products>`,
  styleUrls: ['./category.component.scss'],
})

bastante picante el tema de rxjs y sus operators 馃懡

primer comentario!

Se me ocurr铆a otra soluci贸n, usando el operador filter para no tener que hacer esa condici贸n, luego si el switchmap directo y por 煤ltimo el operador take, para que en teor铆a el subscribe se complete