async/await vs Promesas: errores comunes y cómo evitarlos

async/await no reemplaza a las Promesas: es otra forma de escribirlas. Entender eso evita la mayoría de los errores.

Error 1: olvidar el await

async function guardar() {
  const usuario = obtenerUsuario(); // falta await
  console.log(usuario.nombre);       // undefined
}

usuario es una Promesa, no el usuario. TypeScript te avisa; JavaScript no.

Error 2: hacer en serie lo que puede ir en paralelo

const posts = await obtenerPosts();
const usuarios = await obtenerUsuarios(); // espera a que termine el anterior

Si no dependen entre sí, lánzalas juntas:

const [posts, usuarios] = await Promise.all([obtenerPosts(), obtenerUsuarios()]);

Si una puede fallar sin arruinar a las demás, usa Promise.allSettled.

Error 3: await dentro de forEach

ids.forEach(async (id) => {
  await borrar(id);
});
console.log("listo"); // se imprime antes de borrar

forEach no espera Promesas. Usa for...of si necesitas orden, o Promise.all(ids.map(borrar)) si no.

Error 4: errores que nadie atrapa

async function cargar() {
  try {
    const res = await fetch("/api/posts");
    if (!res.ok) throw new Error(`Respondió ${res.status}`);
    return await res.json();
  } catch (error) {
    console.error("No se pudieron cargar los posts", error);
    return [];
  }
}

Ojo: fetch no lanza error con un 404 o un 500. Solo falla si no hay conexión. Revisa siempre res.ok.

Regla práctica

• ¿Dependen entre sí? → await uno tras otro.
• ¿Son independientes? → Promise.all.
• ¿Recorres una lista? → for...of o map + Promise.all, nunca forEach.