Diferencias entre Promises y Async/Await

Photo by Aron Visuals on Unsplash

JavaScript es un lenguaje de programación ampliamente utilizado en el desarrollo web y de aplicaciones. Dos de los conceptos más importantes en JavaScript para el manejo de asincronía son las Promises (Promesas) y Async/Await. En este artículo, exploraremos las diferencias entre estos dos enfoques y cuándo es más conveniente utilizar uno u otro.

Promises (Promesas)

Las Promesas son una característica introducida en ECMAScript 6 (ES6) que permite el manejo de operaciones asíncronas de una manera más estructurada y legible. Una Promesa representa un valor que puede estar disponible ahora, en el futuro o nunca. Está compuesta por tres estados posibles:

• Pendiente (Pending): El estado inicial de una Promise, cuando la operación aún no se ha completado.
• Cumplida (Fulfilled): La operación se ha completado satisfactoriamente y se proporciona un valor.
• Rechazada (Rejected): La operación ha fallado y se proporciona un motivo del fallo.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5) {
        resolve("Datos obtenidos con éxito");
      } else {
        reject("Error al obtener los datos");
      }
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

Async/Await

Async/Await es una característica introducida en ECMAScript 2017 (ES8) que proporciona una sintaxis más concisa y legible para trabajar con Promesas. La palabra clave async se utiliza antes de una función para indicar que la función devuelve una Promesa. Luego, dentro de la función, puedes utilizar await para esperar la resolución de una Promesa antes de continuar.

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5) {
        resolve("Datos obtenidos con éxito");
      } else {
        reject("Error al obtener los datos");
      }
    }, 1000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

Diferencias clave

Ahora que hemos visto ejemplos de ambas aproximaciones, aquí hay algunas diferencias clave:

1. Sintaxis: Async/Await proporciona una sintaxis más limpia y fácil de entender, especialmente cuando tienes que encadenar múltiples operaciones asincrónicas. Las Promesas pueden volverse difíciles de leer cuando hay muchas de ellas anidadas.
2. Manejo de errores: Async/Await facilita el manejo de errores con el bloque try...catch, lo que hace que el código sea más robusto y menos propenso a errores.
3. Legibilidad: Async/Await tiende a ser más legible y se asemeja más al código síncrono, lo que facilita la comprensión del flujo de ejecución.
4. Flujo de ejecución: Async/Await para el flujo de ejecución hasta que se resuelve la promesa de await. Mientras que una Promesa continua con la ejecución. Esto puede causar algunas “problemas” de paralelismo que veremos en otro artículo.

¿Cuándo usar uno u otro?

La elección entre Promises y Async/Await depende de tus preferencias personales y de la situación. Sin embargo, aquí hay algunas pautas generales:

• Promises: Útil cuando deseas un mayor control sobre el flujo de ejecución o cuando trabajas con código asincrónico de manera más manual. Pueden ser preferibles en situaciones donde necesitas encadenar Promises de manera específica.
• Async/Await: Recomendado para la mayoría de los casos, ya que ofrece una sintaxis más limpia y legible. Es especialmente útil cuando se trabaja con múltiples llamadas asincrónicas o cuando se necesita un manejo de errores más claro.

En resumen, tanto Promesas como Async/Await son para el manejo de asincronía en JavaScript. La elección entre uno u otro dependerá de tu estilo de programación y las necesidades específicas de tu proyecto.