Promesas y Async/Await en JS

La asincronía en JavaScript es esencial para manejar operaciones como solicitudes a servidores, manipulación de archivos o ejecución de tareas demoradas sin bloquear el hilo principal. En este artículo, exploraremos cómo manejar la asincronía utilizando Promesas y async/await, aplicándolos a escenarios reales.

1. ¿Qué es una Promesa en JavaScript?

Una Promise en JavaScript representa una operación asincrónica que eventualmente puede completarse con un valor (resolve) o fallar con un error (reject).

Ejemplo básico:

const miPromesa = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("¡Operación completada con éxito!");
  }, 2000);
});

miPromesa
  .then((resultado) => console.log(resultado))
  .catch((error) => console.error(error));

Aquí la promesa se resuelve después de 2 segundos.

2. Aplicación en la Vida Real: Peticiones a una API con fetch()

El método fetch() devuelve una Promise y se usa comúnmente para hacer solicitudes HTTP.

function obtenerUsuarios() {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      if (!response.ok) {
        throw new Error("Error en la solicitud");
      }
      return response.json();
    })
    .then((data) => console.log("Usuarios:", data))
    .catch((error) => console.error("Error:", error));
}

obtenerUsuarios();

3. Async/Await: Simplificando el Código Asíncrono

async/await es una forma más legible de trabajar con código asincrónico.

async function obtenerUsuariosAsync() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/users");
    if (!response.ok) {
      throw new Error("Error al obtener los usuarios");
    }
    let data = await response.json();
    console.log("Usuarios:", data);
  } catch (error) {
    console.error("Error:", error);
  }
}

obtenerUsuariosAsync();

4. Caso Real: Simulación de un Pedido de Comida

Ejemplo de cómo manejar un proceso de pedido de comida con async/await:

function prepararPedido(pedido) {
  return new Promise((resolve, reject) => {
    console.log(`Preparando ${pedido}...`);
    setTimeout(() => {
      resolve(`${pedido} está listo!`);
    }, 3000);
  });
}

async function gestionarPedido() {
  try {
    let pedido1 = await prepararPedido("Pizza");
    console.log(pedido1);

    let pedido2 = await prepararPedido("Hamburguesa");
    console.log(pedido2);
  } catch (error) {
    console.error("Error en la preparación del pedido:", error);
  }
}

gestionarPedido();

5. Ejecutar Múltiples Promesas Simultáneamente con Promise.all()

Cuando necesitamos ejecutar varias promesas al mismo tiempo y esperar a que todas finalicen, usamos Promise.all().

async function gestionarPedidos() {
  try {
    let resultados = await Promise.all([
      prepararPedido("Sushi"),
      prepararPedido("Pasta"),
      prepararPedido("Ensalada"),
    ]);
    console.log("Todos los pedidos están listos:", resultados);
  } catch (error) {
    console.error("Error en la preparación de los pedidos:", error);
  }
}

gestionarPedidos();

6. Manejo de Errores con try/catch

Es fundamental capturar errores para evitar que nuestro código falle sin control.

async function obtenerDatos(url) {
  try {
    let response = await fetch(url);
    if (!response.ok) {
      throw new Error("No se pudo obtener los datos");
    }
    let data = await response.json();
    return data;
  } catch (error) {
    console.error("Error en la obtención de datos:", error);
  }
}

obtenerDatos("https://jsonplaceholder.typicode.com/posts").then((data) =>
  console.log(data),
);

Manejar la asincronía en JavaScript es clave para el desarrollo de aplicaciones modernas. Promesas y async/await nos permiten escribir código más limpio y eficiente. Dominar estos conceptos te ayudará a manejar interacciones con APIs, bases de datos y cualquier tarea que requiera tiempo de espera sin bloquear la ejecución del código principal.