Evitando el callback hell

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

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.

Cómo solucionar el Infierno de Callbacks

Utilizando promesas, puedes resolver este problema 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.

¿Cómo resolver este problema de Callback Hell?

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 como input para el segundo. De esta manera, el código queda más limpio y profesional.

Conoce más sobre RxJS

Otra alternativa que brinda RxJS es la posibilidad de manipular varios observables al mismo tiempo. Con las promesas, puedes hacer uso de Promise.all([]) para realizar N procesamientos asincrónicos en paralelo y obtener sus resultados.
De forma muy similar, en RxJS puedes hacer lo siguiente.

import { zip } from 'rxjs';
readAndUpdate(): void {
  // Agrupando observables en un mismo subscribe
  zip(
    this.apiService.getProduct(1),
    this.apiService.updateProductPATCH(1, { name: 'Nuevo nombre' })
  )
  .subscribe(res => {
    const get = res[0];
    const update = res[1];
  });
}

Importando la función zip, puedes crear un array de observables y suscribirte a todos ellos al mismo tiempo. Diferenciando por el índice de cada uno el resultado de la operación que ejecutaron para obtenerlo.

En este ejemplo, el índice 0 posee el resultado de la lectura y el índice 1 el del update.

Contribución creada por: Kevin Fiorentino.

Aportes 21

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Rodolfo Rafael Ruiz Rodriguez

hace 2 años

Sería un buen complemento en la escuela de Angular, un curso de Rxjs.

Elioenai Garcia Garcia

hace 2 años

Un curso de Rxjs, plis. 0_o

Rober Martínez Bejarano

hace 2 años

Muy buena la clase y la explicación del profesor, pero quiero aportar de que hay otros métodos que nos ayudan a realizar peticiones en paralelo en los observables, solo que hay que tener claro su uso y estos son: forkJoin, combineLatest y withLatestFrom.
Para que puedan observar las diferencias dejo por acá este link (https://www.digitalocean.com/community/tutorials/rxjs-operators-forkjoin-zip-combinelatest-withlatestfrom) donde se evidencian las diferencias de cada uno de ellos.

Jesusamado Salvador Llica García

hace 5 meses

Mi reacción durante y despues de esta clase

Miguel Sosa

hace un año

Para obtener los elementos del array (para el caso de Zip) cuando se conoce la posición y el tipo de dato, es más sencillo hacerlo así

const [read, update] = response;

antonn-fernandez

hace 2 años

https://rxjs.dev/
Documentacion de Rxjs!

Andrés Mauricio Montenegro

hace un año

Mejor explicado no se puede:

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

Kevin Bueno

hace un año

Rxjs es mi pastor

Raul Castillo

hace 10 meses

esa función de ZIP será de gran ayuda para optimizar el tiempo de respuesta de mi portal.
Excelente aporte

José Luis Cortés Molina

hace 2 años

Zip , similar a PromiseAll()

Darwing Steven Sánchez Londoño

hace 2 años

Cada que avanzo en el curso me doy cuenta de lo increible y asombroso que es el Framework, tantas formas de solucionar problemas y todo tan claro con Nico, no me la creo jaja.

Emilio Nicolás Mendoza Patti

hace 2 años

Dejo los codigos de los servicios que hice

  fetchReadAndUpdate(id: string, dto:UpdateProductDTO) {
    return zip(
      this.getProduct(id),
      this.update(id, dto)
    );
  }

  getProductAndupdate(id: string, dto:UpdateProductDTO){
    return this.getProduct(id)
      .pipe(
        switchMap((product) => this.update(product.id, dto))
      )
  }

Y tambien como los llamo del lado del componente:

  readAndUpdate(id: string){
    this.productsService.getProductAndupdate(id, {title: 'change'})
      .subscribe(data => {
        console.log(data);
      });

    this.productsService.fetchReadAndUpdate(id, {title: 'change'})
    .subscribe(response => {
      const product = response[0];
      const update = response[1];
    })

  }

Felipe Sierra

hace 3 meses

Es necesario tener presente que el uso de switchMap cancela el resultado del observable anterior, esto es, en caso de que se disparen dos peticiones dentro de un switchMap, este solo obtendrá el resultado del último,

Projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable .>
RxJs.Dev/switchMap

Si lo que se quiere es enviar escuchar más de una observable a la vez y al mismo tiempo usar este resultado para encadenar un nuevo request a manera de callback se puede hacer uso de mergeMap, este permite unir observables sin priorizar uno sobre el otro.

LEONARDO FERNANDEZ

hace 8 meses

el profe Nicolas nombra NGRX en lugar RXJS, si alguien tiene la duda son cosas diferentes, NGRX es el “redux” de Angular que tambien funciona con observables (RXJS)