Las promesas son una de las formas en que podemos lidiar con operaciones asincrónicas en JavaScript. Muchas personas luchan con la comprensión de cómo funcionan las promesas, por lo que en este post voy a tratar de explicarlos tan simple como pueda.
Las promesas son un tema amplio, así que no puedo entrar en todos los detalles en este artículo. Pero encontrarás una introducción general a lo que son las Promesas, explicaciones de términos como resolver, rechazar y encadenar, y un ejemplo de código para crear y usar Promesas.
Requisito previo: Para entender mejor este artículo, echa un vistazo a mi otra publicación sobre Retrollamada (callback) en JavaScript.
¿Qué es una promesa?
Una promesa en JavaScript es similar a una promesa en la vida real. Cuando hacemos una promesa en la vida real, es una garantía de que vamos a hacer algo en el futuro. Porque las promesas solo se pueden hacer para el futuro.
Una promesa tiene 2 resultados posibles: se mantendrá cuando llegue el momento o no.
Esto también es lo mismo para las promesas en JavaScript. Cuando definimos una promesa en JavaScript, se resolverá cuando llegue el momento, o será rechazada.
Promesas en JavaScript
En primer lugar, una Promesa es un objeto. Hay 3 estados del objeto Promesa:
- Pendiente: estado inicial, antes de que la promesa tenga éxito o falle
- Resuelto: Promesa completada
- Rechazado: promesa fallida
Por ejemplo, cuando solicitamos datos del servidor mediante una Promesa, estará en modo pendiente hasta que recibamos nuestros datos.
Si logramos obtener la información del servidor, la Promesa se resolverá con éxito. Pero si no obtenemos la información, entonces la Promesa estará en el estado rechazado.
Además, si hay múltiples solicitudes, luego de que se resuelva (o rechace la primera Promesa), comenzará un nuevo proceso al que podemos adjuntarlo directamente mediante un método llamado encadenamiento.
Si lo prefieres, también puedes ver la versión de video a continuación:
¿Cuál es la diferencia entre retrollamadas y promesas?
La principal diferencia entre las funciones de retrollamadas y las promesas es que adjuntamos una retrollamada a una promesa en lugar de pasarla. Así que todavía usamos funciones de retrollamada con Promesas, pero de una manera diferente (encadenamiento).
Esta es una de las mayores ventajas de usar Promesas, pero ¿por qué?
¿Qué es el encadenamiento?
Las funciones de retrollamadas se han utilizado solas para operaciones asincrónicas en JavaScript durante muchos años. Pero en algunos casos, usar Promesas puede ser una mejor opción.
Si hay varias operaciones asincrónicas por hacer y si tratamos de usar retrollamadas antiguas para ellas, nos encontraremos rápidamente dentro de una situación llamada "Infierno Retrollamada":
firstRequest(function(response) {
secondRequest(response, function(nextResponse) {
thirdRequest(nextResponse, function(finalResponse) {
console.log('Final response: ' + finalResponse);
}, failureCallback);
}, failureCallback);
}, failureCallback);Sin embargo, si manejamos la misma operación con Promesas, ya que podemos adjuntar retrollamadas en lugar de pasarlas, esta vez el mismo código anterior parece mucho más limpio y fácil de leer:
firstRequest()
.then(function(response) {
return secondRequest(response);
}).then(function(nextResponse) {
return thirdRequest(nextResponse);
}).then(function(finalResponse) {
console.log('Final response: ' + finalResponse);
}).catch(failureCallback);El código justo arriba muestra cómo se pueden encadenar múltiples retrollamadas una tras otra. El encadenamiento es una de las mejores características de Promesas.
Creación y uso de una promesa paso a paso
En primer lugar, usamos un constructor para crear un objeto Promesa:
const myPromise = new Promise();Se necesitan dos parámetros, uno para el éxito (resolver) y otro para el error (rechazar):
const myPromise = new Promise((resolve, reject) => {
// condition
});Finalmente, habrá una condición. Si se cumple la condición, la Promesa se resolverá, de lo contrario será rechazada:
const myPromise = new Promise((resolve, reject) => {
let condition;
if(condition is met) {
resolve('Promise is resolved successfully.');
} else {
reject('Promise is rejected');
}
});Así que hemos creado nuestra primera Promesa. Ahora vamos a usarlo.
then( ) para promesas resueltas:
Si vuelves a visitar la imagen al principio de esta publicación, verás que hay 2 casos: uno para promesas resueltas y otro para rechazadas. Si la Promesa se resuelve (caso de éxito), algo sucederá después (depende de lo que hagamos con la Promesa exitosa).
myPromise.then();Se llama al método then( ) después de que se resuelva la Promesa . Entonces podemos decidir qué hacer con la Promesa resuelta.
Por ejemplo, registremos el mensaje en la consola lo que obtuvimos de la Promesa:
myPromise.then((message) => {
console.log(message);
});catch( ) para Promesas rechazadas:
Sin embargo, el método then( ) es solo para Promesas resueltas. ¿Qué pasa si la Promesa falla? Entonces, necesitamos usar el método catch( ) .
Del mismo modo que adjuntamos el método then( ). También podemos adjuntar directamente el método catch() justo después de then( ):
myPromise.then((message) => {
console.log(message);
}).catch((message) => {
console.log(message);
});Entonces si la promesa es rechazada, saltará al método catch() y esta vez veremos un mensaje diferente en la consola.
Para Terminar
Así es como creamos una Promesa en JavaScript y la usamos para casos resueltos y rechazados. Las promesas son un tema más amplio, y hay muchas más cosas que aprender sobre ellas. Entonces, entender cómo funcionan lleva tiempo.
Esta publicación es solo una introducción a Promesas , y espero que te haya resultado útil para tener una idea sobre qué son las Promesas de JavaScript y cómo usarlas.
Si deseas obtener más información sobre desarrollo web, no dudes en visitar mi canal de Youtube para obtener más información.
Gracias por leer!
Traducido del artículo de Cem Eygi - JavaScript Promise Tutorial: Resolve, Reject, and Chaining in JS and ES6.