Manejando Múltiples Promesas en Paralelo con Await en JavaScript

JavaScript es un lenguaje de programación que ha evolucionado para manejar operaciones asincrónicas, siendo async/await una de las características más poderosas y modernas para este fin. Este artículo proporciona una visión práctica de cómo utilizar async/await para escribir código asincrónico claro y fácil de mantener.

¿Qué es Async/Await?

Async/await es un conjunto de expresiones introducidas en ES2017 que simplifican el trabajo con promesas en JavaScript, permitiendo escribir funciones asincrónicas de manera que parezcan síncronas.

• async: Se utiliza para declarar una función asincrónica. Al hacerlo, garantizas que dicha función devolverá una promesa.
• await: Se usa dentro de una función declarada con async para esperar a que una promesa se resuelva antes de continuar con la ejecución del código.

Ejemplo Básico de Async/Await

async function obtenerDatos() {
  const respuesta = await fetch('https://api.misitio.com/datos');
  const datos = await respuesta.json();
  return datos;
}

En este ejemplo, fetch es una función que devuelve una promesa. Usando await, el código se detiene hasta que fetch resuelva la promesa y entonces asigna el resultado a respuesta. Posteriormente, realiza la transformación a JSON de manera asincrónica y devuelve los datos.

Manejo de Errores

Un aspecto crucial en el manejo de operaciones asincrónicas es el control de errores. Con async/await, se utiliza try/catch para capturar errores, al igual que en el código síncrono.

async function obtenerDatos() {
  try {
    const respuesta = await fetch('https://api.misitio.com/datos');
    const datos = await respuesta.json();
    return datos;
  } catch (error) {
    console.error('Hubo un problema al obtener los datos:', error);
  }
}

Consejos para Usar Async/Await

• Marca con async solo las funciones que realmente utilizan await.
• No uses await en funciones regulares, ya que no tienen capacidad para esperar promesas.
• Utiliza bloques try/catch para manejar errores potenciales en las promesas.
• Considera manejar las condiciones de carrera cuando hagas múltiples llamadas asincrónicas para prevenir resultados inesperados.

Async/Await en bucles

Al utilizar async/await en bucles, es importante entender la diferencia entre ejecutar promesas en serie o en paralelo.

Ejecución en Serie

async function ejecucionSerie(tareas) {
  for (const tarea of tareas) {
    await tarea(); // Espera a que cada tarea se complete antes de la siguiente
  }
}

Ejecución en Paralelo

async function ejecucionParalelo(tareas) {
  const promesas = tareas.map(tarea => tarea());
  await Promise.all(promesas);
}

En el ejemplo de ejecución en serie, cada tarea se espera que termine antes de comenzar la siguiente.

Entendiendo el Funcionamiento de las Funciones Asíncronas en Programación

async function cargarDatos() {
    let datos = await fetch('url-a-los-datos');
    return datos.json();
}
    

async function obtenerDatos() {
    try {
        let datos = await fetch('url-a-los-datos');
        return datos.json();
    } catch (error) {
        // Manejar el error
        console.error('Error obteniendo datos:', error);
    }
}
    

const promise1 = fetch('/api/data1');
const promise2 = fetch('/api/data2');
const promise3 = fetch('/api/data3');

Promise.all([promise1, promise2, promise3])
  .then((responses) => {
    // Aquí manejaríamos las respuestas
    return Promise.all(responses.map((response) => response.json()));
  })
  .then((data) => {
    // Combinar y utilizar los datos recibidos
  })
  .catch((error) => {
    // Manejar el error, como una falla de red
  });