¿Cuál es el concepto de JavaScript Promise?. Las promesas son unos objetos que nos facilitan la gestión de la programación asíncrona dentro de JavaScript. Por ejemplo imaginemos que tenemos un programa de JavaScript que usa dos bloques de código que incluyen un setTimeout.
setTimeout(function() { console.log("tarda 1 segundos") },1000); setTimeout(function() { console.log("tarda 4 segundos") },5000);
El resultado la veremos impreso por la consola , al pasar 1 segundo se imprimirá “tarda 1 segundo” y a los 4 segundos se imprimirá ” tarda 4 segundos”.
El problema le tenemos si queremos que el código que tarda 4 segundos se ejecute primero que el que tarda 1 segundo. En estos momentos los dos bloques se ejecutan de forma asíncrona e independiente.
Una solución es introducir dentro del código de los 4 segundos una llamada a una función que invoque el de 1 segundo , pero esto acoplaría dos funciones que en principio no están relacionadas, es una mala práctica.
La otra solución es usar JavaScript Promises y encadenar una promesa con otra.
Un ejemplo de JavaScript Promise
Para ello vamos usar JavaScript ES6 y construirnos dos objetos promesas , el primero tardará 4 segundos en ejecutarse y el segundo únicamente 1. Las promesas disponen del método then() que permite encadenar unas con otras .
var promesa1 = function() { return new Promise(function(resolver, cancelar) { setTimeout(function() { console.log("pasan 4 segundos"); resolver(); }, 4000); }); } var promesa2 = function() { return new Promise(function(resolver, cancelar) { setTimeout(function() { console.log("pasan 1 segundos"); resolver(); }, 1000); }); } promesa1().then(promesa2).then(function() { console.log("termino"); });
En este caso la promesa dispone de dos parámetros resolver o cancelar . Cuando se termina el timeout invocamos a resolver para dar la promesa por finalizada. Esta a través de su método then invocará a la siguiente y así sucesivamente.
De esta forma conseguiremos que el código asíncrono se ejecute de la forma que deseamos y primero veamos pasar por pantalla el 4 , luego el 1 y la finalización.
Entender como funcionan las promesas es importante en JavaScript para poder generar un código flexible.
Otros artículos relacionados : JavaScript Reactive Programming , Introducción Rx.js
Hola, tengo una duda.
¿ Quién provee los métodos resolve y reject que están disponibles en el constructor de la promesa ?
Excelente explicación, las mas fácil de entender.
gracias 🙂
Hola. No terminaba de entender el concepto de Promesa en JS, pero con este ejemplo creo que lo voy viendo muy claro.
Otro pequeña duda:
¿Tienen las promesas más funcionalidades o la del ejemplo es la única?
Muchas gracias de antemano.
Si que tienen más se pueden fusionar como en este caso o enlazar o cancelar 🙂
Más práctico y sencillo imposible, un ejemplo que se entiende y se puede extrapolar a muchas situaciones. Un diez.
gracias 🙂
Te felicito, es la explicación más fácil que he leído, entendí de inmediato, un post corto y preciso 😀 maravilloso !!!
gracias 🙂
[…] Promesas : La inclusión de un API de promesas a nivel del lenguaje se agradece mucho ya que casi todos los programas de JavaScript son eminentemente asíncronos. […]
Interesante, por lo visto, viendo tantas publicaciones sobre javascript me pregunto si eso es debido a que le gusta mucho javascript o es muy importante para los javadevelopers tener conocimiento de javascript para realizar soluciones en el front end? saludos!
Yo creo que las dos cosas 🙂