JavaScript es un lenguaje de programación fundamental para el desarrollo web. Por ello, conocer los distintos elementos que lo conforman es muy importante. Uno de estos elementos son las promesas. En este post, te enseñaremos cuál es la sintaxis de promesas en JavaScript y cómo utilizarla con un ejemplo sencillo.
¿Cuál es la sintaxis de promesas en JavaScript?
La sintaxis de promesas en JavaScript se basa en una nueva instancia de la clase promise, que se puede crear con las palabras clave new Promise. Para manejar esta instancia, debemos insertar una función anónima dentro de sus paréntesis que tenga, a su vez, dos parámetros: resolve, reject. A continuación, te mostramos cómo se ve esta sintaxis:
promesaEjemplo = new Promise (function (resolve, reject))
Los parámetros resolve y reject son dos métodos que tenemos a nuestra disposición para hacer que el estado de una promesa transicione de pending a fulfilled o de pending a rejected. Puedes conocer más sobre estos estados en nuestro post sobre promesas en frontend JavaScript.
Ahora, la sintaxis de promesas en JavaScript también tiene una segunda parte: el consumidor. Entonces, en función de si usamos resolve o reject, el consumidor podrá definir la acción asíncrona a ejecutar con los métodos then (si hubo resolve) y catch (si se da reject).
promesaEjemplo( ).then(( ) => { }).catch(( ) => { })
Ejemplo de la sintaxis de promesas en JavaScript
Para que la sintaxis de promesas en JavaScript te quede aún más clara, te pondremos un ejemplo. Supongamos que tenemos una función calculateRandomNumber que nos permite pintar un número aleatorio en consola. Esta función, además, tiene un método setTimeOut que nos permite pintar el resultado con un pequeño retraso.
function calculateRandomNumber ( ) {
setTimeOut (( ) => {
console.log (Math.random (Math.random ( ) * 10));
}, 1500);
Ahora que tenemos esta función, hemos decidido pintar algunos strings con las siguientes líneas de código:
console.log («Antes de calcular»);
calculateRandomNumber ( );
console.log («Después de calcular»);
Una vez los tenemos, vemos en nuestra consola el siguiente resultado:
antes de calcular
después de calcular
1
¿Por qué se da en este orden y no en el orden de lectura? Pues porque le hemos dado un retraso a nuestra función calculateRandomNumber, haciendo que nuestro intérprete JavaScript continúe la lectura mientras el tiempo pasa. Aunque este no es un proceso completamente asíncrono, sí podemos hablar de un proceso con asincronía, pues hay un orden temporal afectado.
Ahora, supongamos que queremos hacer que el orden de escritura se mantenga a pesar del retraso temporal. Es decir, que veamos antes de calcular, luego el número y, a continuación, después de calcular. Para ello, podemos utilizar una promesa; haríamos que la función calculateRandomNumber devuelva una promesa que luego podemos controlar con los métodos then y catch.
A continuación, te mostramos cómo hemos transformado la función anterior:
function calculateRandomNumber ( ) {
return new Promise (function (resolve, reject) {
setTimeOut (( ) => {
console.log (Math.random (Math.random ( ) * 10));
}, 1500);
})
}
Ahora, debemos modificar un poco el orden de esta función para hacer que, cuando se calcule el número aleatorio, se resuelva la promesa:
function calculateRandomNumber ( ) {
return new Promise (function (resolve, reject) {
setTimeOut (( ) => {
const randomNumber = Math.random (Math.random ( ) * 10);
resolve (randomNumber);
}, 1500);
});
}
Con esta nueva función hemos logrado cambiar el orden de ejecución a antes de calcular, promise (pending) y después de calcular. Entonces, lo único que falta es controlar el resultado de esta promesa. Para ello, deberemos insertar then, después de llamar a la función calculateRandomNumber ( ).
Recuerda que, como te hemos contado en nuestro post sobre el objeto promise en JavaScript, podemos llamar al método then solo cuando la línea a la que se adjunta nos devuelve una promesa.
Entonces, el último paso será agregar then para determinar el manejo de la función. Como no hemos determinado un espacio reject, no es necesario usar el método catch. A continuación, te mostramos cómo quedan las líneas de código finales que definen lo que se muestra en nuestra consola:
console.log («antes de calcular»);
calculateRandomNumber ( )
.then ((randomNumber) => {
console.log (randomNumber);
console.log («después de calcular»);
})
¿Quieres seguir aprendiendo?
Ahora que conoces cuál es la sintaxis de promesas en JavaScript, ¡es el momento de utilizar este conocimiento en tus propios proyectos! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás a desarrollar todo tipo de proyectos para la web con herramientas como React, JavaScript, HTML, CSS y muchas más. ¿Te animas a seguir aprendiendo con nosotros? ¡Matricúlate ya y cambia tu vida!
