JS 14: Asincronía - Kit de Aprendizaje

1. Sincronía vs Asincronía

JavaScript es normalmente "síncrono" (hace una cosa a la vez). Pero a veces necesitamos hacer cosas que tardan (como pedir datos a un servidor) sin congelar la página.

Analogía: El Restaurante

Síncrono (Bloqueante): El camarero toma tu nota, va a la cocina, espera allí de pie 20 minutos hasta que cocinan tu plato, y luego te lo trae. Mientras tanto, ¡nadie más puede pedir!
Asíncrono (No bloqueante): El camarero toma tu nota, la deja en cocina y sigue atendiendo a otras mesas. Cuando la cocina termina (evento), le avisan para que te lleve la comida.

2. Async / Await: La forma moderna

Olvídate de los "Callbacks" antiguos. Hoy en día usamos async y await para escribir código asíncrono que parece síncrono.

// 1. Marcamos la función como "async"

async function pedirDatos() {

    console.log("Pidiendo datos...");

    

    // 2. Usamos "await" para esperar sin bloquear

    // Es como decir: "Espera aquí hasta que esto termine, pero deja que la página siga funcionando"

    let respuesta = await fetch("https://api.ejemplo.com/datos");

    

    console.log("¡Datos recibidos!");

}

🚀 Top-level await

Antiguamente, solo podías usar await dentro de una función async. Hoy en día, si estás usando módulos (type="module"), puedes usarlo directamente fuera.

// Solo funciona en archivos .js de tipo módulo
const respuesta = await fetch("...");
const datos = await respuesta.json();
console.log(datos);

3. Fetch API: Trayendo datos de Internet

fetch() es la herramienta nativa del navegador para hacer peticiones HTTP (GET, POST, etc.).

Ejemplo Real: Usuario Aleatorio

Haz clic para pedir un usuario a una API pública.

Esperando...

async function obtenerUsuario() {

    try {

        // 1. Hacemos la petición

        const respuesta = await fetch("https://jsonplaceholder.typicode.com/users/1");

        

        // 2. Comprobamos si fue bien (Código 200 OK)

        if (!respuesta.ok) {

            throw new Error("Error en la red: " + respuesta.status);

        }



        // 3. Convertimos la respuesta a JSON (esto también tarda, así que await)

        const usuario = await respuesta.json();

        

        // 4. Usamos los datos

        console.log("Nombre: " + usuario.name);



    } catch (error) {

        // 5. Si algo falla (sin internet, servidor caído), caemos aquí

        console.error("Algo salió mal:", error);

    }

}

4. ¿Qué es JSON?

JSON (JavaScript Object Notation) es el formato estándar para enviar datos por internet. Se parece mucho a un objeto de JS, pero es texto plano.

// Esto es JSON (Texto)

"{ "nombre": "Ana", "edad": 30 }"



// Esto es un Objeto JS (Memoria)

{ nombre: "Ana", edad: 30 }

Por eso usamos respuesta.json(): para transformar ese texto que llega de internet en un objeto que podamos usar.

5. Múltiples Promesas: `Promise.allSettled()`

A veces tienes que pedir 3 cosas a la vez. Promise.all() falla si una sola falla. Promise.allSettled() espera a que todas terminen, sin importar si han ido bien o mal.

const promesas = [
    fetch("/api/usuarios"),
    fetch("/api/productos"),
    fetch("/api/error") // Esta fallará
];

const resultados = await Promise.allSettled(promesas);

resultados.forEach(res => {
    if (res.status === "fulfilled") {
        console.log("Éxito:", res.value);
    } else {
        console.log("Error en esta:", res.reason);
    }
});