JavaScript es un lenguaje de programación basado en eventos. Esto quiere decir que nos permite preparar acciones para ser ejecutadas de manera asincrónica. Uno de los elementos que nos pone a disposición para crear esta asincronía son las promesas. En este post, te enseñaremos qué son las promesas en JavaScript y cómo nos pueden ayudar a crear asincronía.
¿Qué son las promesas en JavaScript?
Las promesas en JavaScript son objetos globales. Es decir, se trata de objetos nativos de este lenguaje de programación a los que tenemos acceso de manera global. El propósito principal de las promesas en JavaScript es crear acciones o programaciones asíncronas. Este tipo de programaciones son aquellas acciones que programamos para ser ejecutadas en algún momento, dependiendo de cuándo sucede otro evento o, incluso, de si llega a suceder. Por tanto, las promesas nos permiten crear acciones que están disponibles para ejecutarse inmediatamente, en el futuro o nunca.
Las promesas en JavaScript están conformadas por varios elementos fundamentales. Principalmente, una promesa tiene un callback, lo que significa que debemos pasarle una función a ejecutar.
Recuerda que cuando pasamos una función como parámetro de un método, se le llama callback. Para conocer más sobre este concepto, puedes leer nuestros posts sobre qué son los callbacks en JavaScript y cómo utilizarlos.
En las promesas de JavaScript sucede lo mismo que con el método reduce. En ambos escenarios, utilizamos una función callback a la que le debemos pasar dos parámetros. En el caso del método reduce, debemos pasarle los parámetros de previousValue y currentValue. Para una promesa, debemos pasar los parámetros resolver y rechazar. La particularidad de este contexto es que los parámetros resolver y rechazar son, a su vez, funciones.
¿Cómo se ven las promesas en JavaScript?
Para entender mejor el concepto de promesas en JavaScript, te ponemos un ejemplo. A continuación, verás una promesa que forma parte de la función doYouLoveMe. Esta promesa crea un console.log con el que pinta en pantalla el mensaje ‘Let me think about it’. Luego, utiliza el método setTimeout para controlar el tiempo tras el cual sucederán las demás acciones contenidas.
function doYouLoveMe (name) {
return new Promise (function (resolve, reject) {
console.log ('Let me think about it...')
setTimeOut (() => {
if (name = 'Alberto') {
resolve ('Yes!')
} else {
reject ('Sorry but no...')
}
}, 1000)
})El método setTimeout forma parte de los métodos disponibles en JavaScript para controlar el tiempo de las acciones a ejecutar. Este método, al igual que las promesas, nos permite crear asincronía, es decir, preparar acciones para casos en los que deben ser ejecutadas, pero que no son inmediatos. Para conocer más sobre este método, te invitamos a leer nuestro artículo sobre los métodos setTimeout y setInterval en JavaScript.
La promesa que acabas de ver ha definido, dentro del método setTimeout, dos posibles acciones. Si el nombre de la función doYouLoveMe es ‘Alberto’, la promesa devuelta se resuelve con el string ‘Yes!’. En caso de que el nombre no sea ‘Alberto’, la función rechazará la promesa y nos devolverá el string ‘Sorry but no…’.
¿Qué quiere decir esto de resolver o rechazar las promesas en JavaScript? Estos dos parámetros o funciones dentro de las promesas hacen referencia a los estados posibles dentro de este objeto. Las promesas en JavaScript son objetos que representan operaciones que todavía no han sido completadas. Por ello, en el ejemplo anterior simulamos este estado pendiente con el método setTimeout.
Ten en cuenta que las promesas, además del estado pendiente, pueden existir en dos estados más. Para conocer más sobre este tema, te invitamos a leer nuestro post sobre los estados de promesas en JavaScript.
Entonces, como las promesas se van a completar más adelante, lo que hacemos es definir su comportamiento en caso de que vaya bien y en caso de que vaya mal. En este sentido, las promesas nos permiten preparar acciones a ejecutar según el escenario que tome lugar, cuando sea que tenga lugar. Por ello, son indispensables para crear asincronía en JavaScript.
Aunque los parámetros resolve y reject nos permiten preparar estas acciones para cualquier escenario, podemos crear promesas en JavaScript sin llamar a ambas funciones. Es decir, podemos crear un objeto promise sin llamar a la función reject o a la función resolve.
Ejemplo práctico con promesas en JavaScript
Las promesas son un concepto que nos permite manejar procesos asíncronos en este lenguaje de programación. Es decir, aquellos procesos que no sabemos cuánto van a tardar ni qué respuesta nos van a dar. Entonces, las promesas (definidas por el objeto promise en JavaScript), nos permiten preparar código en caso de que, cuando el proceso acabe, obtengamos una respuesta satisfactoria o una no satisfactoria.
Un ejemplo práctico con promesas en JavaScript es pensar en un pedido que nos hace nuestra madre. Entonces, supongamos que ella, pensando en la cena de hoy, nos ha pedido ir a por patatas. Esta es una petición que puede considerarse un proceso asíncrono, pues nuestra madre no sabe cuánto tiempo nos va a llevar ir a por patatas ni si vamos a encontrarlas. Tampoco sabemos los detalles detrás de esta petición, no sabemos si vamos a encontrar sitio para aparcar o si la tienda va a estar abierta. Sin embargo, esto no nos importa, solo nos importa el resultado de la promesa.
Siguiendo esta lógica, podemos declarar una función llamada irAPorPatatas que nos devuelva una promesa. Esta promesa tendrá entonces dos opciones: el caso en el que conseguimos patatas y el caso en el que no las conseguimos. En el primer escenario, la promesa se completa (pasa al estado fulfilled) y en el segundo se rechaza (pasa al estado rejected). También podríamos considerar un tercer escenario: el caso en el que no volvemos. En este escenario, la promesa se quedaría eternamente en el estado pending.
Ahora, existen dos métodos que nos permiten pasar de pending a los distintos estados. El método resolve nos ayuda a declarar qué debe suceder para que una promesa se complete. Por su parte, el método reject nos permite declarar qué debe suceder para que la promesa se rechace.
Escribamos un poco de pseudocódigo siguiendo nuestro ejemplo y los métodos anteriores:
function irAPorPatatas ( ) {
return new Promise (function (resolve, reject) {
const hayPatatas = buscarPatatasEn3Sitios ( )
if (hayPatatas) {
resolve ('🥔 🥔')
} else {
reject ('😔 😔')
}
})
}En las anteriores líneas de código, hemos definido una función asíncrona llamada irAPorPatatas. Esta función devuelve una nueva instancia del objeto promise. Luego, define una constante hayPatatas que es igual a buscarPatatasEn3Sitios. Finalmente, usando un condicional, resuelve la promesa cuando encontramos patatas. Si no sucede este escenario, se rechaza la promesa.
Ahora que sabes cómo funcionan las promesas en JavaScript, en KeepCoding estamos seguros de que quieres seguir aprendiendo sobre lo que puedes hacer con este lenguaje de programación. Para ello, te recomendamos echarle un vistazo al programa de nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás todo lo necesario para ser un experto en desarrollo web. En pocos meses, dominarás lenguajes como JavaScript, CSS y HTML. ¿Quieres seguir aprendiendo de manera tanto teórica como práctica? ¡Matricúlate ahora!
