async/await y Fetch API

async/await es azúcar sintáctica sobre las Promesas que hace el código asíncrono prácticamente indistinguible del síncrono. Marcas una función con async y luego usas await antes de cualquier operación asíncrona para "esperar" su resultado sin bloquear el hilo. El resultado es código limpio, lineal y fácil de leer.

Fetch API es la forma nativa del navegador para hacer peticiones HTTP. Reemplaza al viejo XMLHttpRequest con una interfaz basada en Promesas. fetch() devuelve una Promesa con la respuesta, y response.json() convierte el cuerpo en un objeto JavaScript.

Siempre envuelve tus llamadas a APIs en try/catch cuando usas async/await. Los errores de red, respuestas 404 o datos malformados son inevitables en producción. Un buen manejo de errores es lo que separa una app robusta de una que crashea ante cualquier imprevisto.

// async function siempre devuelve una Promesa
async function obtenerUsuario(id) {
  try {
    // await pausa hasta que la promesa resuelva
    const respuesta = await fetch(`https://api.example.com/users/${id}`);
    
    if (!respuesta.ok) {
      throw new Error(`Error HTTP: ${respuesta.status}`);
    }
    
    const datos = await respuesta.json();
    return datos;
  } catch (error) {
    console.error("Error al obtener usuario:", error);
    throw error;
  }
}

// Llamar la función async
async function main() {
  const usuario = await obtenerUsuario(1);
  console.log(usuario.nombre);
}
main();

// Fetch con POST
async function crearUsuario(nuevoUsuario) {
  const resp = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(nuevoUsuario)
  });
  return await resp.json();
}

// Ejecutar en paralelo
async function cargarTodo() {
  const [usuarios, posts] = await Promise.all([
    fetch("/api/users").then(r => r.json()),
    fetch("/api/posts").then(r => r.json())
  ]);
}