No tienes acceso a esta clase

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

Observable vs. Promesa

9/23
Recursos

JavaScript posee dos maneras de manejar la asincronicidad, a trav茅s de: Observables y Promesas, que comparten el mismo objetivo, pero con caracter铆sticas y comportamientos diferentes.

驴Qu茅 es la asincronicidad en JavaScript?

La asincronicidad se refiere a cuando Javascript utiliza procesos as铆ncronos para realizar muchas tareas a la vez, tareas que pueden tomar determinado tiempo o nunca finalizar. Es decir, este lenguaje de programaci贸n es un monohilo y esto significa que solo puede hacer una cosa a la vez y la ejecuci贸n de un proceso demorar谩 a los que vengan posteriormente hasta que este termine.

Es as铆 como la lectura de archivos o las peticiones HTTP son procesos as铆ncronos y se requiere de un m茅todo para manipular este tipo de procesos como los observables y promesas.

驴Qu茅 son los observables?

Gran parte del ecosistema Angular est谩 basado en observables y la librer铆a RxJS es tu mejor aliado a la hora de manipularlos. El patr贸n de dise帽o 鈥渙bservador鈥 centraliza la tarea de informar un cambio de estado de un determinado dato o la finalizaci贸n de un proceso, notificando a m煤ltiples interesados cuando esto sucede sin necesidad de que tengan que consultar cambios activamente.

Caracter铆sticas de los Observables en Javascript

  • Emiten m煤ltiples datos
  • Permiten escuchar cualquier tipo de proceso, (peticiones a una API, lectura de archivos, etc.)
  • Notifican a m煤ltiples interesados
  • Pueden cancelarse
  • Manipulan otros datos (transformar, filtrar, etc.) con RxJS.
  • Son propensos al callback hell

Ejemplos con Observables

 import { Observable } from 'rxjs';
 
 const getAnObservable$ = () => {
    return new Observable(observer => {
        observer.next('Valor 1');
        observer.next('Valor 2');
        observer.next('Valor 3');
    });
 };
 (() => {
   getAnObservable$
     .pipe(
        // Manipulaci贸n de resultados con RxJS
     )
     .subscribe(res => {
       console.log(res);
     });
 })

驴Qu茅 son las promesas?

Las promesas son un m茅todo algo m谩s sencillo y directo para manipular procesos asincr贸nicos en Javascript. Adem谩s,
estos objetos tienen dos posibles estados:

  • Resuelto
  • Rechazado

Dependiendo si el proceso asincr贸nico se ejecut贸 correctamente hubo alg煤n error.

Desde el a帽o 2017 se especific贸 en el estandar de EcmaScript la posibilidad de manipular promesas de una manera mucho m谩s f谩cil con async/await. Async para especificar que una funci贸n es as铆ncrona y Await para esperar por el resultado sin bloquear el hilo de ejecuci贸n.

Caracter铆sticas de las Promesas

  • Ofrecen mayor simplicidad
  • Emiten un 煤nico valor
  • Evitan el callback hell
  • No se puede cancelar
  • Proveen una robusta API nativa de Javascript disponible desde ES 2017
  • Constituyen librer铆as populares como AXIOS o Fetch

Ejemplos con Promesas

// Promesas con .then() y .catch()
const p = new Promise((resolve, reject) => {
  setTimeout(function(){
    resolve("隆Hola Promesa!");
  }, 1000);
});
p.then((result: string) => {
  console.log(result);        // 隆Hola Promesa!
}).catch(err => {
  console.log(err);           // En caso de error
});

// Promesas con async/await
(async () => {
    const p = await new Promise((resolve, reject) => {
      setTimeout(function(){
        resolve("隆Hola Promesa!");
      }, 1000);
    }).catch(err => {
      console.log(err);           // En caso de error
    });;
    console.log(p);            // 隆Hola Promesa!
});

Observable a Promesa

Una caracter铆stica m谩s de RxJS es la posibilidad de convertir f谩cilmente un Observable a Promesa:

import { of, firstValueFrom, lastValueFrom } from 'rxjs';

observableToPromise(): Promise<string> {
    return lastValueFrom(of('隆Soy una promesa!'));
}

La funci贸n of devuelve en forma de observable lo que sea que le coloques dentro. La funci贸n firstValueFrom o lastValueFrom devuelve el primer (o 煤ltimo) valor que el observable emita en forma de promesa.

Promesa a Observable

De manera muy similar, puedes convertir una Promesa en un Observable:

import { from } from 'rxjs';

PromiseToObservable(): Promise<Observable<any>> {
    return from(new Promise((resolve, reject) => { console.log('隆Soy un observable!') }));
}

La funci贸n from de RxJS convertir谩 una promesa en observable para que puedas manipular y suscribirte a la emisi贸n de sus datos.

Conclusi贸n

En ocasiones te sentir谩s mejor trabajando de las dos maneras, tanto con el observable como con la promesa. Lo importante es comprender c贸mo funcionan ambos objetos, sus caracter铆sticas, diferencias y decidir cu谩l aplicar en tus proyectos de programaci贸n.


Contribuci贸n creada por: Kevin Fiorentino.

Aportes 22

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

Estuvo buena la clase, pero sinceramente por favor considerar hacer un curso de RXJS y sus operadores (al menos los mas utilizados), no es algo que se pueda ver y practicar con 1 o 2 clases, debiese ser un curso dentro del roadmap de la escuela. Recordemos que tener conocimientos sobre los operadores RXJS nos da un poder bastante grande en el desarrollo con Angular

Me asombra el conocimiento que tiene Nicol谩s, me gustar铆a saber un poco de su historia de como aprendi贸 y aprende tan minuciosamente todo este tema, pues ser铆a un ejemplo a seguir. Gracias por la explicaci贸n.
Soy un observable de este curso, ja ja ja.

Deberia existir un curso de rxjs orientado a angular

Magistral clase!!
Muchas gracias Nicolas por esta explicaci贸n 馃憤馃憤.

Observables:

  • Omitir / responder varias respuestas
  • Transmisi贸n de muchos datos
  • Permite hacer transformaciones de datos y cancelar la subscripci贸n
  • Permite transformar la respuesta (pipes)
  • Es posible escuchar constantemente : eventos / responsive / fetchs

Promesa :

  • Retorna una 煤nica respuesta
  • Solo se ejecuta una vez
  • Simplicidad

#HaganCursoDeRXJS

Estaba con muchas dudas acerca de qu茅 tan parecida era una promesa y un observable, y esta clase me ha ayudado un mont贸n.

recomiendo mucho esta clase de otro curso aqui en platzi para entender mejor los observables y su patron de dise帽o

https://platzi.com/clases/1642-javascript-profesional/22188-implementacion-del-patron-observer/

Excelente curso @nicobytes, sobretodo por que te motiva entender lo que explican en el video mediante 鈥渆l apartado recursos鈥 donde el profe aporta informaci贸n de mucho valor para repasar la lecci贸n.

Aqu铆 hay otro aporte muy bueno acerca de Promesas y Observables, con Alan Buscaglia | Gentleman Programming

Entrevista T茅cnica de Angular - Promesas VS Observables

aqu铆 quedo resuelta mi pregunta del porque no cancel谩bamos las suscripciones para el caso de las peticiones con HttpClient

Mis notas de esta clase

En un Observable se emite un stream de respuestas que se pueden obtener suscribi茅ndose al Observable. Por convenci贸n al crear un observable se pone $ al final del nombre. Angular usa Observables es muchos sitios, como en formularios reactivos, escuchar eventos din谩micos, hacer peticiones HTTP, etc.

import { Observable } from 'rxjs';

const doSomething$ = () }
	new Observable(observer => {
		observer.next('valor')
	})
}
  • next() 鈫 Permite emitir un valor.

Suscribirse a un observable para obtener sus valores transmitidos.

const observable$ = doSomething()
observable$.suscribe(response => {
	console.log(response)
})

Ventajas de los Observables

  • Se pueden emitir varios valores.

    const getAnObservable$ = () => {
        return new Observable(observer => {
            observer.next('Valor 1');
            observer.next('Valor 2');
            observer.next('Valor 3');
        });
     };
    
  • Se puede cancelar la emisi贸n de datos.

  • Permite hacer transformaciones de los datos que se est谩n recibiendo usando pipes():

    
    const { filter } = require('rxjs/operators');
    ...
    
    getAnObservable$
    .pipe(
      // Transformaci贸n de datos
    	filter(value => value !=== null)
    )
    
    .subscribe(res => {
    	console.log(res);
    });
    
    

Nota: cuando Angular hace una petici贸n HTTP, al terminar la petici贸n destruye el observable.

Excelente clase, muy importante la comparaci贸n Observable vs. Promise

Para convertir un Observable a Promise se usa:

// Angular  mayor a 13.* operador lastValueOf
lastValueOf( observable )
// Angular menor a 13.*
observable.asPromise()

Para convertir un Promise a Observable se usa:

// Angular  mayor a 13.* operador of
of(promise)

en Node 18 ya no ha necesidad del async .
La diferencia entre Promesa y Obsevable:
Promesa: Una sola respuesta, no es cancelable.
Observable: un Stream de de respuestas y es cancelable.

https://platzi.com/tutoriales/1789-asincronismo-js/5063-las-promesas-y-async-await-logicamente-no-son-iguales-y-te-explico-el-porque/

Aguante RXJS!!!

Sin dudas tomare el curso de Programaci贸n Reactiva con RxJS, lo dejare sin duda en mi lista de cursos que debo tomar despues de terminar la ruta de Angular o antes

pienso que httpClient debe retornar promise y no observable porque las peticiones rest no son reactivas

Observable vs. Promesa

Angular usa Observables en vez de promesas por estas ventajas:

const { Observable } = require('rxjs');
const { filter } = require('rxjs/operators');

const doSomething = () => {
  return new Promise((resolve, reject) => {
    resolve('valor 1');
    resolve('valor 2'); //! no llega ac谩 porque ya se resolvi贸
    setTimeout(() => {
      resolve('valor 3'); //! no llega ac谩 porque ya se resolvi贸
    }, 2000);
  });
}

const doSomething$ = () => {
  return new Observable(observer => {
    observer.next('valor 1$');
    observer.next('valor 2$');
    observer.next('valor 3$');
    observer.next(null);
    setTimeout(() => {
      observer.next('valor 4$');
    }, 2000);
    setTimeout(() => {
      observer.next(null);
    }, 2500);
    setTimeout(() => {
      observer.next('valor 5$');
    }, 3000);
    //* podemos enviar varios datos porque estamos suscritos a ellos
  });
}

(async () => {
  const response = await doSomething();
  console.log(response);
})();

(() => {
  const obs$ = doSomething$();
  obs$.pipe(
    filter(value => value !== null)
  )
  .subscribe(response => {
    console.log(response);
  })
})();

Est谩n muy buenas las clases pero hoy lunes 28/02/2022 el API proporcionado est谩 ca铆do, no se puede tener acceso.

que buena clase; he entendido demasiado con esto.

Muy buena explicacion. Me quedo mas claro