No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

2D
2H
2M
48S

Evitando el callback hell

15/23
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.

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

Un curso de Rxjs, plis. 0_o

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.

Mi reacci贸n durante y despues de esta clase

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;

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

Rxjs es mi pastor

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

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

  }

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.

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

Mi cerebro hizo Booom!!! jajaj

Hay que ir pidiendo el curso de RXJS!!!

Excelente clase.

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

Noto que hay bastante dependencia de la libreria rxjs.
Es muy buena, pero hubiese sido perfecto si fuera perteneciera a angular.

Wow que clase!!
En verdad las cosas que aprendi en esta clase me ayudaran mucho en mi crecimiento profecional

excelente clase,Nico como siempre.