La diferencia entre Promise vs Observable es algo que muchas veces cuesta entender en el mundo de la programación asíncrona. Vamos a intentar explicarlo de una forma sencilla partiendo de un ejemplo muy elemental .Cuando nosotros trabajamos con JavaScript podemos definir una variable y asignarle un valor.
var numero=5; console.log(numero);
Este código asigna un valor de 5 a la variable número . Parece que no tenemos nada que explicar ya que se trata de un ejemplo trivial. Sin embargo hay que remarcar una cosa se trata de un código que se ejecuta de forma síncrona es decir la asignación es instantánea.
JavaScript Promise
¿Qué diferencia existe entre este código y una promesa de JavaScript? . Muy sencillo una promesa de JavaScript hace lo mismo pero la asignación del valor es asíncrona es decir se asignará en un futuro.
Vamos a ver su código:
var promesa= new Promise (function(resolve,reject) {
setTimeout(function() {
resolve(5);
},2000);
})
promesa.then(function(resultado) {
console.log(resultado);
})
Este código nos imprimirá al cabo de 2 segundos un 5 en la consola:
JavaScript Promise vs Observable
Una vez tenemos claro para qué sirve una promesa y cómo asigna una variable de forma asíncrona la siguiente pregunta que es evidente es para que sirve un Observable. En este caso vamos a realizar la misma operación pero en este caso con una lista de elementos.
var lista=[1,2,3]; console.log(lista);
En este caso simplemente imprimimos la lista por la consola.
Volvemos a estar en una situación de código síncrono .
Promise vs Observable
¿Entonces qué es un Observable? . Un observable no es ni más ni menos que una colección de elementos asíncronos.
Esto en un principio nos puede parecer extraño ya que una colección siempre la hemos entendido como un grupo de elementos y punto. No parece muy razonable tener una colección de elementos asíncronos . Sin embargo a poco que pensemos se trata de algo muy común por ejemplo cada vez que pulsamos un botón en un interface de usuario se produce un evento de click. Se trata de una colección de elementos asíncronos.
Si volvemos a pulsar en el mismo botón saldrá un segundo evento , si volvemos a pulsar saldrá un tercero etc. Eso es lo que es un observable veamos su código:
</pre> <html> <head> <script type="text/javascript" src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"> </script> <script type="text/javascript" src="eventos.js"> </script> </head> <body> <input type="button" value="pulsar" id="miboton"/> </body> </html> <pre>
El código de JavaScript:
window.onload=function() {
var boton = document.getElementById('miboton');
var pulsaciones = rxjs.fromEvent(boton, 'click');
pulsaciones.subscribe(e => {
console.log('has pulsado');
});
}
Cada vez que pulsamos el botón RxJs nos mostrará un mensaje en la consola, acabamos de construir una lista de elementos asíncronos. Acabamos de ver la diferencia entre promise vs observable.
Hola buena día, lo único que no entiendo es a los que dicen que no entienden, fue muy sencilla y clara la explicación muchas gracias.
pd: no sé si el autor ha ido modificando el ejemplo, pero al día de hoy fue de mucha ayuda, fácil y muy entendible. gracias nuevamente.
Profesor, la parte de Promise se entiende perfectamente.
La parte Observable, ya cuesta entender un poco mas, yo creo que falta otro ejemplo.
Saludos profesor! muy buenos sus cursos.
lo intentare modificar 🙂
la verdad que no se entiende
Lo intentare mejorar 🙂
Estuvo bien, pero la función setTimeout(function[, delay, arg1, arg2, …] ) en su parametro delay no es exactamente “el tiempo que va tardar”, en realidad es el tiempo minimo que le puede tomar en ejecutarse, ya que este entra a la queueMessage del event loop, así que aunque en este caso si se cumple que sean 2seg por motivo de que no hay nada más en el calll stack que pueda demorar para que la cola de mensajes, aunque también en el caso de las promesas se van al microtask queue.
gracias por el aporte 🙂
Buenas, sin acritud, la verdad que no se entiende nada, me he quedado totalmente igual. De todos modos gracias y sigue así, a´nimo.
Hola Antonio , normalmente los Observables se usan mucho para llamadas ajax asíncronas , que se combinan entre ellas .Este es un artículo de iniciación
Un saludo
Esta mal la explicación, pues un observable sirve para tener un mayor control en llamadas asíncrona, al igual que una promesa, con la diferencia que el control es total con un observable, hay que recordar que rxjs es una librería que utiliza callbacks
Bueno a veces la didáctica no consigue encajar a todos 🙂
Como lo explicas se ve igual que Promises.all. ¿Cuál sería la ventaja?
Un observable puede luego enlazar programación funcional como map filter o reduce de forma natural