El flujo full-stack: fetch a la API

Uniendo las dos mitades

Ya tienes un frontend (React) y un backend (Node/Express con una API). El full-stack es conectarlos: el frontend hace peticiones HTTP a la API y muestra la respuesta.

fetch

En el navegador, fetch hace peticiones HTTP. Devuelve una promesa:

async function cargarUsuarios() {
  const respuesta = await fetch("/api/usuarios");
  const usuarios = await respuesta.json();
  return usuarios;
}

• fetch(url) devuelve una promesa con la respuesta.
• respuesta.json() (también promesa) extrae el cuerpo como objeto.
• Para enviar datos (POST), se pasan opciones: método, cabeceras y body.

El ciclo completo

1. El usuario hace algo en el frontend (pulsa un botón).
2. El frontend llama a la API con fetch.
3. El backend procesa, consulta la base de datos y responde JSON.
4. El frontend recibe la respuesta y actualiza la interfaz (estado de React).

En el ejercicio te pasamos una función api que simula al backend. Tú escribes la lógica que la usa y procesa la respuesta.