Tutorial de promesa de JavaScript: resolución, rechazo y encadenamiento en JS y ES6

Las promesas son una de las formas en que podemos lidiar con las operaciones asincrónicas en JavaScript. A muchas personas les cuesta entender cómo funcionan las Promesas, por lo que en esta publicación intentaré explicarlas de la manera más simple posible.

Las promesas son un tema amplio, por lo que no puedo entrar en todos los detalles en este artículo. Pero encontrará 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 comprender mejor este artículo, consulte mi otra publicación sobre devoluciones de llamada de 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 solo se pueden hacer promesas para el futuro.

Una promesa tiene dos posibles resultados: 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 se rechazará.

Promesas en JavaScript

En primer lugar, una promesa es un objeto. Hay 3 estados del objeto Promise:

  • 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 varias 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 prefiere, también puede ver la versión en video a continuación:

¿Cuál es la diferencia entre devoluciones de llamada y promesas?

La principal diferencia entre las funciones de devolución de llamada y las promesas es que adjuntamos una devolución de llamada a una promesa en lugar de pasarla. Así que todavía usamos funciones de devolución de llamada con Promises, pero de una manera diferente (encadenamiento).

Esta es una de las mayores ventajas de usar Promises, pero ¿por qué?

¿Qué es el encadenamiento?

Las funciones de devolución de llamada 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 que realizar varias operaciones asíncronas y tratamos de utilizar las antiguas devoluciones de llamada, nos encontraremos rápidamente dentro de una situación llamada infierno de devolución de llamada:

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 Promises, ya que podemos adjuntar Callbacks en lugar de pasarlos, esta vez el mismo código anterior se ve mucho más limpio y más 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 anterior muestra cómo se pueden encadenar múltiples devoluciones de llamada una tras otra. El encadenamiento es una de las mejores características de Promises.

Creación y uso de una promesa paso a paso

En primer lugar, usamos un constructor para crear un objeto Promise:

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'); } });

Por eso hemos creado nuestra primera Promesa. Ahora usémoslo.

luego () para promesas resueltas:

Si revisa la imagen al comienzo de esta publicación, verá que hay 2 casos: uno para promesas resueltas y otro para rechazadas. Si la Promesa se resuelve (caso de éxito), algo sucederá a continuación (depende de lo que hagamos con la Promesa exitosa).

myPromise.then();

El método then () se llama después de que se resuelve la Promesa. Entonces podemos decidir qué hacer con la Promesa resuelta.

Por ejemplo, registremos el mensaje en la consola que obtuvimos de Promise:

myPromise.then((message) => { console.log(message); });

catch () para promesas rechazadas:

Sin embargo, el método then () es solo para promesas resueltas. ¿Y si falla la promesa? Entonces, necesitamos usar el método catch ().

Asimismo 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.

Envolver

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, comprender cómo funcionan lleva tiempo.

Esta publicación es solo una introducción a Promesas, y espero que le haya resultado útil para tener una idea sobre qué son las Promesas de JavaScript y cómo usarlas.

Si desea obtener más información sobre el desarrollo web, no dude en visitar mi canal de Youtube para obtener más información.

Thank you for reading!