La API fetch()

El uso más común y vital de las Promesas y Asincronía en el desarrollo web frontal (Frontend) es pedir datos a un servidor externo (Backend) utilizando las llamadas "APIs".

Para esto, el navegador nos provee una herramienta nativa llamada fetch().

¿Qué hace fetch?

fetch() siempre devuelve una Promesa que se resolverá en la "Respuesta" a la solicitud HTTP, ya sea exitosa o no.

Casi siempre se usa en combinación con la sintaxis moderna async / await.

El ciclo clásico de 2 pasos de Fetch

Pedir datos suele requerir dos promesas en cadena:

1. Contactar al servidor (fetch()).
2. Convertir el texto que nos devuelve el servidor a un formato de datos de JavaScript manipulable, llamado JSON (response.json()).

Ejemplo: Pidiendo datos falsos

Vamos a consumir datos de una API de prueba gratuita llamada "JSON Placeholder".

const obtenerUsuarios = async () => {
    const url = "https://jsonplaceholder.typicode.com/users";

    try {
        console.log("Conectando con el servidor...");
        // 1. Primer Await: Hacemos la petición a la red y esperamos la respuesta del servidor
        const respuesta = await fetch(url);
        
        if (!respuesta.ok) {
            // El servidor respondió, pero con un error (ej. 404 No encontrado)
            throw new Error(`¡Error HTTP! Estado: ${respuesta.status}`);
        }

        console.log("Descargando datos...");
        // 2. Segundo Await: Esperamos a que el sistema procese y convierta la respuesta de texto plano a JSON (objetos JS).
        const datosUsuarios = await respuesta.json();
        
        console.log("¡Éxito!");
        
        // datosUsuarios ahora es un Array normal de JavaScript. ¡Usemos .map()!
        datosUsuarios.map(usuario => {
            console.log(`Usuario: ${usuario.name} (${usuario.email})`);
        });

    } catch (error) {
         // Atrapa fallos de la red (ej. se cortó el internet) o el throw manual de arriba
        console.error("No se pudo obtener la información:", error);
    }
};

obtenerUsuarios();

Este es el patrón estandarizado para consumir datos en el 99% de las aplicaciones web modernas hechas con React, Vue, Angular o Vanilla JS puro.