En el mundo de la programación, hay muchos términos que son un poco complejos de entender a la primera: esto sucede especialmente con las promesas. Por ello, en este post, te demostraremos un ejemplo práctico con promesas en JavaScript para que entiendas mejor este concepto.
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:
//Ejemplo práctico con promesas en JavaScript
function irAPorPatatas ( ) {
return new Promise (function (resolve, reject) {
const hayPatatas = buscarPatatasEn3Sitios ( )
if (hayPatatas) {
resolve ('🥔 🥔')
} else {
reject ('😔 😔')
}
})
}
//Ejemplo práctico con promesas en JavascriptEn 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.
¿Cómo se ejecuta este ejemplo práctico con promesas en JavaScript?
Como te hemos explicado en nuestro post sobre promesas en frontend JavaScript, una promesa tiene dos participantes: un productor y un consumidor. El productor de una promesa es quien la envía. Es decir, nuestra función irAPorPatatas. El consumidor de esta promesa es el que llama a la función productora y ejecuta acciones frente a ella. Es decir, quien decide qué sucede cuando una promesa se rechaza o se resuelve. Para definir estas reacciones, usamos los métodos then y catch, encargados de ejecutar la función productora desde afuera.
El método then se encarga de definir la reacción a la promesa cuando esta se resuelve. Es decir, es pareja del método resolve. Por su parte, el método catch define la reacción cuando la promesa se rechaza, siendo pareja del método reject.
Siguiendo nuestro ejemplo práctico con promesas en JavaScript, el consumidor de la promesa irAPorPatatas sería nuestra madre. Ella nos ha dicho que, si llegamos con patatas (la promesa se resuelve) hará tortilla, y si no llegamos con patatas (la promesa se rechaza) pediremos pizza.
Entonces, podemos escribir un poco de pseudocódigo siguiendo estos escenarios que nos ha dicho nuestra madre:
//Ejemplo práctico con promesas en JavaScript
irAPorPatatas ( )
.then (hacerTortilla)
.catch (pedirPizza)Además del método then y catch, existe un método que nos permite determinar un final sin importar el resultado de la promesa. Es decir, mientras la promesa pase al estado fulfilled o rejected (no puede estar en pending), se ejecutará esta reacción. Para conocer más sobre este concepto, te recomendamos leer nuestro post sobre el método finally en JavaScript.
¿Te animas a seguir aprendiendo?
Esperamos que este ejemplo práctico con promesas en JavaScript te haya ayudado a afianzar tus conocimientos sobre este tema. Sin embargo, ¡todavía queda mucho por aprender de este lenguaje de programación! Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva e íntegra a nivel teórico y práctico en el que aprenderás a desarrollar con herramientas y lenguajes como JavaScript, HTML, CSS y JSX. ¿Te animas a seguir aprendiendo con nosotros? ¡No te lo pierdas y pide información para descubrir cómo convertirte en un experto!
