Promesas y Async/Await en JavaScript: Guía Definitiva

¿Por qué importa la asincronía?

JavaScript es un lenguaje de un solo hilo. Las operaciones asíncronas (peticiones HTTP, lectura de archivos, temporizadores) son fundamentales para no bloquear la ejecución.

Callbacks: El Origen

// Patrones con callbacks (callback hell)
obtenerUsuario(id, (usuario) => {
    obtenerPosts(usuario.id, (posts) => {
        obtenerComentarios(posts[0].id, (comentarios) => {
            console.log(comentarios);
        });
    });
});

Promesas: La Solución

const obtenerDatos = new Promise((resolve, reject) => {
    const exito = true;
    
    setTimeout(() => {
        if (exito) {
            resolve({ id: 1, nombre: "Ana" });
        } else {
            reject("Error al obtener datos");
        }
    }, 1000);
});

obtenerDatos
    .then(datos => console.log(datos))
    .catch(error => console.error(error));

Async/Await: La Elegancia

async function obtenerUsuarioCompleto(id) {
    try {
        const response = await fetch(`/api/usuarios/${id}`);
        const usuario = await response.json();
        
        const postsRes = await fetch(`/api/posts?userId=${id}`);
        const posts = await postsRes.json();
        
        return { usuario, posts };
    } catch (error) {
        console.error("Error:", error);
        throw error;
    }
}

// Uso
obtenerUsuarioCompleto(1).then(datos => {
    console.log(datos);
});

Promise.all: Ejecución Paralela

async function cargarDashboard() {
    const [usuarios, posts, comentarios] = await Promise.all([
        fetch("/api/usuarios").then(r => r.json()),
        fetch("/api/posts").then(r => r.json()),
        fetch("/api/comentarios").then(r => r.json())
    ]);
    
    console.log({ usuarios, posts, comentarios });
}

Patrones Avanzados

// Promise.allSettled — espera todas aunque fallen
const resultados = await Promise.allSettled([
    fetch("/api/1"),
    fetch("/api/2"),
    fetch("/api/3")
]);

// Promise.race — la primera en resolver
const masRapida = await Promise.race([
    fetch("/servidor1/datos"),
    fetch("/servidor2/datos")
]);

Conclusión

Async/Await es la forma moderna y legible de manejar código asíncrono en JavaScript. Domínalo y tu código será más limpio y fácil de mantener.