Evitando el Callback Hell con SwitchMap y ZIP en Observables

Curso de Consumo de APIs REST con Angular

Contenido del curso

Http Basic

Buenas prácticas

Auth

Archivos

Despedida

23
Consumo de APIs en Angular con HTTP y Autenticación
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:42

Evitando el Callback Hell con SwitchMap y ZIP en Observables

Curso de Consumo de APIs REST con Angular

Clase 15 de 23

Clase 15 / 23

Comentarios (22)22 comentarios

Rodolfo Rafael Ruiz Rodriguez

Hace 5 años

Gustavo Jiménez Liévano

Hace 5 años

Jimmy Buriticá Londoño

Hace 5 años

Elioenai Garcia

Hace 5 años

Reinaldo Mendoza

Hace 5 años

Jesusamado Salvador Llica García

Hace 3 años

Pol Valle

Hace 3 años

Rober Martínez Bejarano

David Castro

Miguel Sosa

Alexis Franco

Adriana Rozo Rojas

Antonio Luis Fernandez Dromundo

Hace 5 años

David Castro

Hace 4 años

cristhopher yesid barreto salamanca

Hace 5 años

Nicolas Molina

Profesor

Hace 5 años

Andrés Mauricio Montenegro

David Castro

Raul Castillo

Kevin Bueno

LEONARDO FERNANDEZ

Felipe Sierra

Richard Rodas

José Cortés Molina

Darwing Steven Sánchez Londoño

Hace 5 años

Emilio Nicolás Mendoza Patti

Hace 5 años

Brandon Maciel

Hace 4 años

Alexis Franco

Hace 4 años

Nelson David Cortés Mondragón

Hace 4 años

Carlos Dugarte

Hace 5 años

David Castro

Hace 4 años

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.

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

Si sería muy bueno

Cada vez lo veo mas necesario, RXJS es muy importante.

Un curso de Rxjs, plis. 0_o

Creo que es necesario

Mi reacción durante y despues de esta clase

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.

Ok, que bueno tu aporte y aclaración de ese detalle. Gracias por compartiro, Rober.

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;

Hola Miguel, lo que propones es colocar esto dentro el suscribe, o dentro del servicio?

desestructurar arreglo

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

Antonn, gracias amigo!

No sería mejor utilizar MergeMap en lugar de SwitchMap para evitar que al iniciarce una nueva subscripción se ejecute el complete de la anterior sin haber terminado?

Hola, si depende del caso de uso para hacer esto hay tres pipes, MergeMap , SwitchMap y exhaustMap que depende del caso puede asegurar como se completan.

Mejor explicado no se puede:

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

Que bien, muchas gracias Andres por el aporte.

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

Rxjs es mi pastor

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)

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 .>

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.

Mi cerebro hizo Booom!!! jajaj

Zip , similar a PromiseAll()

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.

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];
    })

  }

Hola, yo quiero saber como ejecutar un metodo solo cuando se complete una petición http

Hola Nicolas, que operador recomiendas para este clase de ejemplo el .zip o el .switchMap ? Teniendo en cuenta que el .zip hace un poco confusa la respuesta que se recibe al suscribirnos, ya que este retorna esa respuesta en un rray y pues el indice no es muy comprensible si otro desarrollador intenta leer el código?

Excelente clase.

Siii, Yo también creo que es muy importante un curso de programación reactiva con RxJS.

Sii, digo lo mismo. Yo también me uno a la petición!

Http Basic

Conexión a REST APIs con Angular HTTP y buenas prácticas

Solicitudes GET en APIs con Angular: Obtener Productos

Consulta de Producto Específico en eCommerce con Angular

Integración de Swiper en Angular para Galería de Productos

Creación de Productos con POST y Data Transfer Objects en Angular

Actualización de Datos con Métodos PUT y PATCH en APIs

Eliminar productos con solicitudes DELETE en Angular

Paginación de Productos con Parámetros URL en Angular

Ventajas de los Observables sobre Promesas en Angular

Implementación de Retry con Observadores en Angular

Buenas prácticas

Solución de Problemas CORS en Aplicaciones Angular

Gestión de Ambientes en Angular: Desarrollo vs Producción

Manejo de Errores en Observables con Angular

Transformaciones de Datos en el Frontend con Map y Pipes

Evitando el Callback Hell con SwitchMap y ZIP en Observables

Auth

Autenticación con JWT: Implementación y Gestión de Sesiones en APIs

Autenticación y Manejo de Tokens en Peticiones HTTP

Implementación de Interceptores en Angular para Medir Tiempos de Respuesta

Interceptores en Angular: Agregar Token Automáticamente

Uso de Contextos para Interceptores en Angular

Archivos

Descarga de Archivos con HTTP Client en Angular

Subida de Archivos con HTTP y Angular paso a paso

Despedida

Consumo de APIs en Angular con HTTP y Autenticación

Evitando el Callback Hell con SwitchMap y ZIP en Observables

Progreso del curso

Http Basic

Buenas prácticas

Auth

Archivos

Despedida

Recursos

Recursos