Espere a que las promesas se resuelvan en JavaScript

1. ¿Qué son las promesas en JavaScript?
2. Etapas de Promise en JavaScript
3. Implementación de promesas utilizando palabras clave async y await en JavaScript

En la versión ECMA Script (ES6), se introdujeron la mayoría de las funciones modernas del lenguaje de programación JavaScript. En esta versión también se introdujeron las características de este lenguaje, una de las características más destacadas y ampliamente utilizadas de JavaScript, llamada promesas.

Como sabemos, el lenguaje JavaScript es un lenguaje de subproceso único, lo que significa que solo se puede realizar una tarea y en un orden específico. En algunos casos, esto puede crear un problema.

Por ejemplo, si ha utilizado una función setTimeout(), ejecutada después de tres segundos, el compilador de JavaScript no esperará 3 segundos. Como se muestra a continuación, simplemente comenzará a ejecutar la siguiente parte del código.

function abc() {
  console.log('a');
  setTimeout(() => {
    console.log('b');
  }, 3000)
  console.log('c');
}
abc();

Producción :

a
c
b

Aquí, b debe haber sido impreso antes de c, pero ese no es el caso. Entonces, para superar esto, se introdujeron las promesas en JavaScript, lo que nos ayuda a realizar una tarea asíncrona.

Veamos cómo funcionan las promesas y esperemos hasta que las promesas se resuelvan en segundo plano. Además, la mayoría de los conceptos que aprenderemos en este artículo son compatibles con la versión JavaScript ES6 y superior, y es posible que no funcionen en navegadores más antiguos como IE.

¿Qué son las promesas en JavaScript?

Cada vez que realizamos una solicitud, como una solicitud de base de datos o una solicitud de API, puede llevar un tiempo recuperar los datos del servidor. No podemos decir cuánto tiempo pueden tomar tales operaciones en producción donde se realizan muchas solicitudes simultáneamente.

Las promesas en JavaScript nos permiten esperar a que tales operaciones o tareas completen su ejecución y, en función de si la tarea se cumple, podemos tomar otras acciones.

Debemos crear un objeto de clase Promise usando la palabra clave new para usar promesas. Promesa toma dos argumentos, resolver y rechazar.

El método resolve() devuelve un objeto de promesa que se resuelve con un valor. Si hay un error al ejecutar una promesa, el método de rechazo devolverá un error.

Las promesas utilizan las palabras clave async y await. Estas palabras clave son importantes y necesarias al implementar las promesas.

Aprenderemos más sobre ellos más adelante en este artículo.

Etapas de Promise en JavaScript

Una analogía con Promises podría ser, digamos que usted y su amigo se prometen que ambos irán a ver una película juntos el domingo. Y supongamos que es viernes y la Promesa se hace hoy.

Como el domingo aún no ha llegado, técnicamente podemos decir que la Promesa está pendiente. Si te encuentras con tu amigo el domingo, la Promesa se cumple, y si rompes tu Promesa al no ir a ver la película, entonces la Promesa se rechaza.

Las promesas en JavaScript se realizan en 3 etapas, y son las siguientes.

• Pendiente: Cuando una promesa se está ejecutando, se dice que está en la etapa pendiente.
• Cumplido: Cuando una promesa completa su ejecución con éxito, se resuelve y devuelve el valor de la operación realizada. Aquí es donde se dice que la Promesa está en etapa cumplida.
• Rechazado: Si la Promesa falla durante su ejecución, se rechaza y devuelve un mensaje de error. Aquí es donde se dice que la Promesa está en la etapa de rechazo.

Implementación de promesas utilizando palabras clave async y await en JavaScript

Las palabras clave async y await van de la mano al implementar las promesas.

La palabra clave async se puede usar con una función que cree que puede tardar en ejecutarse. Esto hace que funcionen de forma asíncrona.

Esta palabra clave le dice al motor de JavaScript que una parte del código dentro de esa función podría tardar algún tiempo en ejecutarse, y debe esperar hasta que complete su ejecución.

Debemos especificar qué parte del código dentro de esa función podría tardar en ejecutarse. Aquí es donde usamos la palabra clave await.

Entonces, siempre que use una palabra clave await dentro de esa función, el motor de JavaScript esperará hasta que esa parte se ejecute por completo. Si la ejecución es exitosa, se devolverá la Promesa cumplida, o se rechazará la Promesa.

El siguiente ejemplo ilustra esto.

Aquí, tenemos una función llamada myPromise. Hemos creado una Promesa dentro de esta función, ya sea resuelta o rechazada.

El trabajo de esta función es obtener los datos JSON de la API. Dado que estamos solicitando datos de la API, la Promise podría tardar un tiempo en ejecutarse, por lo que hemos utilizado await para esperar a que se resuelva la Promesa.

Como usamos await antes de devolver una Promise, debemos hacer que myPromise funcione como async.

La API que hemos utilizado es una API gratuita del sitio web JSONPlaceholder. Usando esta API, obtendremos los datos de las publicaciones.

Podemos usar la función fetch() para obtener los datos de esta API. Después de que esta función obtenga los datos, debemos especificar qué queremos hacer a continuación usando la función then().

Simplemente devolvemos los datos de la función fetch() a la función then() como parámetro. El nombre del parámetro puede ser cualquier cosa y le hemos dado response como nombre del parámetro.

Finalmente, devolveremos la resolución de la Promesa convirtiendo el resultado en formato JSON usando la función response.json().

async function myPromise() {
  return await new Promise((resolve, reject) => {
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          resolve(response.json());
        })
        .catch(error => {
          reject(error);
        });
  })
}

Si nos encontramos con algún error al obtener los datos de la API, eso será manejado por la función catch(). Esta función devolverá el error con la ayuda de la función reject().

Una vez resuelta la Promesa, puede hacer lo que quiera con los datos, que se devuelven con la ayuda de la función then(). Puede tener varias funciones then(), que se ejecutarán en una secuencia una tras otra.

Y si desea detectar errores, puede utilizar la función catch().

myPromise().then(result => {
  result.forEach(element => {
    var heading = document.createElement('h2');
    heading.innerHTML = element.title;
    document.body.appendChild(heading);
  });
});

Producción:

Después de que la función myPromise() devuelva una promesa resuelta, usamos la función then() para obtener el título de las publicaciones y mostrarlo en el documento HTML.

Aquí, hemos creado una etiqueta de encabezado h2, y estamos agregando los títulos presentes dentro de los datos de resultados que recibimos de la API de publicaciones al body del documento HTML.