Magistral clase!!
Muchas gracias Nicolas por esta explicación 👍👍.
Http Basic
Lo que aprenderás para consumir API con Angular
Solicitudes GET
Detalle de producto
Implementando slides
Solicitudes POST
Solicitudes PUT y PATCH
Solicitudes DELETE
Url Parameters / Paginación
Observable vs. Promesa
Reintentar una petición
Buenas prácticas
El problema de CORS
Manejo de ambientes
Manejo de errores
Transformar peticiones
Evitando el callback hell
Auth
Login y manejo de Auth
Manejo de headers
Uso de interceptores
Enviar Token con un interceptor
Creando un contexto a interceptor
Archivos
Descarga de archivos con Http
Subida de archivos con Http
Despedida
Continúa con el Curso de Angular Router y Programación Modular
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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.
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.
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);
});
})
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:
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.
// 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!
});
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.
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.
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
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:
Promesa :
Aquí hay otro aporte muy bueno acerca de Promesas y Observables, con Alan Buscaglia | Gentleman Programming
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
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.