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 “observador” 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.nest('Valor 1');
        observer.nest('Valor 2');
        observer.nest('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 13

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Magistral clase!!
Muchas gracias Nicolas por esta explicació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

Deberia existir un curso de rxjs orientado a 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.

Estaba con muchas dudas acerca de qué tan parecida era una promesa y un observable, y esta clase me ha ayudado un montó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

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

Entrevista Técnica de Angular - Promesas VS Observables

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/

Aguante RXJS!!!

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.

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

Muy buena explicacion. Me quedo mas claro