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