Asincronía en JavaScript: promesas, async/await y fetch

JavaScript no espera: cuando pides algo que tarda (una petición a un servidor, un temporizador), el resto del código sigue ejecutándose. Para trabajar con el resultado cuando llegue se usan promesas y, sobre todo, async/await.

El orden de ejecución

Lo asíncrono se ejecuta después del código síncrono, aunque el tiempo de espera sea 0.

console.log("1");
setTimeout(() => console.log("2"), 0);
console.log("3");
// Imprime:  1  3  2

Promesas y async/await

Una promesa representa un valor que llegará en el futuro: se cumple (resolve) o falla (reject). async/await permite escribirlas como si fueran código normal.

// con .then()
obtenerUsuario(1)
    .then(usuario => console.log(usuario.nombre))
    .catch(error => console.log("Error:", error));

// con async/await (más legible)
async function mostrar() {
    try {
        const usuario = await obtenerUsuario(1);
        console.log(usuario.nombre);
    } catch (error) {
        console.log("Error:", error);
    }
}

fetch: consumir una API

fetch(url) devuelve una promesa. Se hace await dos veces: una para la respuesta y otra para pasar el cuerpo a JSON.

const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
const data = await res.json();
console.log(data);

Comprueba lo aprendido