Angular Observable vs Angular Promesa: Diferencias, Usos y Cómo Construirlos

Cuando se trata de Angular, hay dos tipos principales de gestión de datos: el uso de Observables o Promesas, siendo ambos capaces de gestionar código asíncrono en JavaScript. A primera vista, los Observables se ven como una alternativa más avanzada a las Promesas. Pero, de hecho, son bastante diferentes. Desde tener API separadas, pasando por tener diferentes motivos, hasta ofrecer distintas formas de manejar el modelo asíncrono en JavaScript, Angular Observables y Angular Promises tienen sus propios poderes.

¿Cómo saber cuál es el adecuado para tu Angular proyecto? Discutámoslos en detalle, comparemos cada implementación y veamos las funciones, ventajas y desventajas. Además de esto, demostraré cómo usar Angular Observables y Angular Promesas con nuestro App Builder de código bajo  Para que pueda manejar eventos asincrónicos de manera fácil y rápida.

Try Ignite UI for Angular

¿Qué es la promesa en Angular?

Las promesas en Angular proporcionan una manera fácil de ejecutar funciones asincrónicas que usan devoluciones de llamada mientras emiten y completan (resuelven o rechazan) un valor a la vez. Al utilizar una promesa Angular, está habilitado para emitir un solo evento desde la API. A continuación, el controlador (o la directiva) se hace cargo y registra hasta tres devoluciones de llamada: éxito, error y/o notificaciones.

Hay cuatro estados de la Angular Promesa:

• Cumplido: la acción se cumple
• Rechazado: acción fallida
• Pendiente: la acción aún no se ha realizado correctamente o ha fallado
• Resuelto: la acción se cumple o se rechaza

Algo que hay que recordar es que Angular Promesa es más pasiva en comparación con la Observable y no se puede cancelar una vez iniciada. En otras palabras, cuando pasa la devolución de llamada al constructor Promise (controlador o directiva), resolverá o rechazará la función.

Ahora bien, hay varias desventajas de la Angular Promise.

• Las promesas no se pueden cancelar y debe esperar hasta que la devolución de llamada devuelva un error o un éxito.
• No es adecuado para el control de errores centralizado y predecible, ya que los errores se envían a la promesa secundaria.
• No proporcionan ninguna operación.
• Las promesas ejecutan un valor asincrónico solo una vez.
• No se puede utilizar para varios valores a lo largo del tiempo.
• Se vuelven difíciles de administrar con aplicaciones más grandes.
• No se pueden volver a intentar.

¿Cómo crear promesas en Angular?

Para crear una promesa en Angular solo necesitamos usar la sintaxis 'new Promise(function)'. El constructor de promesas toma function como parámetro y esa función interna toma resolve y reject como parámetros.

Veamos cómo se ve esto en el fragmento de código a continuación.

Ahora que sabemos cómo crear una Promesa Angular, la usaremos para implementar un escenario muy sencillo. La Promesa creada nos ayudará a validar si el número es primo o no.

Y finalmente, para poner en práctica nuestro método, manejaremos la Promesa de la siguiente manera.

¿Qué es observable en Angular?

Los observables proporcionan más capacidades, ya que permiten a los desarrolladores ejecutar funciones de forma asincrónica y sincrónica. Representan una secuencia de valores que pueden controlar 0, 1 o varios eventos, utilizando la misma API para cada uno. Personalmente, lo que me gusta de Angular Observables es la cantidad de operadores que simplifican la codificación, incluidos retry(), replay(), map, forEach, reduce y más.

Al igual que Angular promesas, los observables en Angular también tienen sus desventajas.

• Los observables no son compatibles de forma nativa con los navegadores.
• Requieren que los operadores RxJS obtengan un nuevo flujo personalizado de valores.
• Depurar el código con observables puede ser un poco más difícil.
• Debe tener el conocimiento de herramientas y técnicas adicionales para probar el código RxJS.

¿Cómo crear observables en Angular?

Para crear un Observable en Angular, primero, es necesario importar Observable de rxjs porque, como aprendimos anteriormente, no son compatibles de forma nativa.

Para crear un nuevo Observable solo necesitamos usar su constructor y agregar la lógica que se ejecutará al suscribirse. En nuestro caso, crearemos un Observable que devolverá una gran fuente de datos para nuestro componente de cuadrícula Angular.

Después de eso, lo que nos queda es suscribirnos al Observable creado y vincular los datos recibidos como fuente de datos a nuestros componentes Angular.

Un ejemplo excelente y más significativo de un caso de uso para trabajar con observables es el uso de IgxGrid con datos remotos. Como puede ver en el ejemplo, solo se obtiene inicialmente una pequeña parte de los datos cuando se representa el componente y, en cada desplazamiento u operación de datos que se realiza, se toma una nueva parte de los datos. Este observable de tipo any[] se enlaza directamente a la cuadrícula mediante una tubería Angular asíncrona. La canalización asincrónica se suscribe a un objeto Observable o Promise y devuelve el valor más reciente que ha emitido.

Haga clic aquí para ver la muestra e inspeccionar el código de inmediato.

¿Cómo usar Angular observable y promesa en App Builder?

Como entendemos por lo escrito anteriormente, el escenario más común para usar Observables es cuando necesitamos vincular datos a algún componente. Para obtener datos, debemos realizar una solicitud HTTP mediante HttpClient. La mejor manera de hacerlo es llevarlo a cabo en un servicio separado. Todos los métodos HttpClient devuelven un RxJS Observable de algo. En general, un Observable puede devolver varios valores a lo largo del tiempo, pero un Observable de HttpClient siempre emite un único valor y, a continuación, se completa, para no volver a emitirse nunca más.

En el App Builder, vincular un componente a una fuente de datos es fácil e intuitivo. Actualmente tiene las siguientes opciones para elegir con el fin de utilizar una de nuestras fuentes de datos predefinidas:

• Cargue un archivo JSON o agregue una dirección URL a un archivo JSON que contenga sus datos.
• Agregue o cargue un archivo de definición de Swagger que describa todos los puntos finales de su servidor. A continuación, puede obtener directamente sus datos reales desde allí.

Después de eso, independientemente del enfoque que elijas, puedes usar el menú desplegable Datos de nuestro panel de propiedades para vincular los datos al componente, por ejemplo, a la cuadrícula Angular.

Ahora podemos ver el código generado en Angular. Le ofrecemos un servicio separado en el que la obtención de datos se realiza mediante el método HTTP get.

Y puede ver en el archivo MasterViewComponent ts la suscripción que realizó el servicio de datos. Con esta base, puede llevar a cabo escenarios aún más complicados cuando sea necesario.

Angular Observable vs Promesa: ¿Cuál es la diferencia?

Para presentar las diferencias entre Observables y Promesas en Angular, decidí componer una tabla. De esta forma podrás compararlos de una forma más digerible y súper concisa.

 

ANGULAR OBSERVABLES	ANGULAR PROMISES
Puede controlar eventos sincrónicos y asincrónicos	Solo puede manejar devoluciones de datos asincrónicas
Emitir y completar 0, 1 o varios valores durante un período de tiempo (transmisión de datos en varias canalizaciones)	Emitir solo un valor a la vez (tener una canalización)
Menos pasivo, es decir,	Más pasivo, es decir,
Ofrece operaciones como map, filter, reduce, retry() o replay(), map, forEach y más	Do not provide operators
Son cancelables, usando el método unsubscribe(), lo que significa que el oyente no recibe más valores	No son cancelables
Son perezosos, es decir, la función de productor se activa después de que los usuarios se suscriben a la transmisión	Están ansiosos, es decir, la devolución de llamada de Promise se ejecuta inmediatamente y solo una vez en el momento de su definición, sin .then y .catch
Subscribers handle errors	Push errors to the child Promises

Aparentemente, en la comparación Angular Observable vs Promesa, el Observable gana. Entonces, ¿hay una buena razón para usar Promise? Absolutamente.

En primer lugar, los observables tienen un cierto costo. Como mencioné antes, no son compatibles de forma nativa con los navegadores. Lo que significa que debe implementar la biblioteca RxJS. Y aunque le ayuda a crear código asíncrono o basado en devolución de llamada, el tamaño de su paquete puede superar los 17,4 kb.

En segundo lugar, cuando la aplicación Angular es asincrónica de forma predeterminada, no hay mejor manera de controlar todas las funciones y eventos asincrónicos que usar Angular Promise. ¿No es así?

A continuación, si no desea usar el estilo reactivo o no le importan las secuencias de valores y los eventos cancelables, elija Promesas en Angular.

En una nota final, recientemente publicamos un tutorial de Angular UI Data Grid extremadamente detallado y útil para ayudarlo a aprender cómo crear una cuadrícula de interfaz de usuario de Angular con todas las funciones desde cero. Por lo tanto, es posible que también desee echarle un vistazo. Haga clic a continuación.