GUÍA / Frontend
Cómo consumir una API REST con JavaScript y React
Aprende a consumir APIs REST con JavaScript y React, manejar loading, errores y respuestas, y organizar el código de forma mantenible.
Introducción y requisitos
Vas a separar la petición HTTP de la interfaz y representar carga, error y éxito. Necesitas JavaScript con módulos y async/await, además de un proyecto React. El ejemplo supone un endpoint GET /api/productos del mismo origen que devuelve un array de objetos con id y nombre. Debes conectarlo a tu backend o preparar ese contrato; no es una API incluida en Academy.
Contrato HTTP, JSON y status codes
Antes del componente, inspecciona la respuesta con Network o Postman. Un 200 indica éxito; 401 requiere autenticación, 403 indica acceso denegado y 404 un recurso no encontrado. Un 500 señala un problema del servidor. JSON es un formato de intercambio, no un tipo validado. Si tu endpoint devuelve 204 sin contenido, no intentes leer JSON; este ejemplo espera una colección JSON, incluso vacía.
Servicio: fetch y async/await
Guarda esta función en productos.js. Comprueba response.ok porque los errores HTTP no rechazan por sí solos la promesa de fetch. La validación mínima evita tratar una respuesta inesperada como una lista de productos. El signal permite cancelar desde el componente.
export async function obtenerProductos(signal) {
const response = await fetch("/api/productos", { signal });
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
if (!Array.isArray(data) || data.some((p) =>
!p || typeof p.id !== "number" || typeof p.nombre !== "string"
)) throw new Error("Respuesta inesperada");
return data;
}Componente: loading, error y success
En Productos.jsx, usa try/catch para convertir el fallo en un estado visible. La limpieza aborta la petición al desmontar; la comprobación del signal evita aplicar una respuesta cancelada. Se muestra el array vacío como un éxito sin resultados. Si trabajas con Next.js App Router, este componente interactivo necesita la directiva use client; evalúa también la carga de datos del framework.
import { useEffect, useState } from "react";
import { obtenerProductos } from "./productos";
export default function Productos() {
const [estado, setEstado] = useState({ tipo: "loading" });
useEffect(() => {
const controller = new AbortController();
async function cargar() {
try {
const datos = await obtenerProductos(controller.signal);
if (!controller.signal.aborted)
setEstado({ tipo: "success", datos });
} catch {
if (!controller.signal.aborted)
setEstado({ tipo: "error" });
}
}
cargar();
return () => controller.abort();
}, []);
if (estado.tipo === "loading") return <p role="status">Cargando…</p>;
if (estado.tipo === "error") return <p role="alert">No se pudo cargar.</p>;
if (!estado.datos.length) return <p>No hay productos.</p>;
return <ul>{estado.datos.map((p) => <li key={p.id}>{p.nombre}</li>)}</ul>;
}Debugging y errores comunes
Prueba sin conexión, con respuesta 500 y con JSON inválido. Mira primero la pestaña Network: un fallo puede estar en la URL o el contrato. Postman no aplica las restricciones CORS del navegador; que funcione allí no garantiza acceso desde tu frontend. No uses mode: no-cors como arreglo: una respuesta opaca no te permite leer el JSON.
Buenas prácticas
No pongas claves privadas en el bundle del navegador. Mantén la URL y validación en el servicio y los mensajes en la interfaz. No lances peticiones dentro del render. En aplicaciones mayores considera el mecanismo del framework para caché, deduplicación y carga en servidor; este ejemplo enseña el ciclo básico, no implementa esas capacidades.
Qué practicar después
Añade una acción explícita de reintento y prueba que no se mezclen respuestas antiguas con nuevas. Documenta el contrato y crea pruebas para colección vacía, estructura inválida y error HTTP. Abre un PR que explique cómo reproducir cada estado y qué decisiones siguen pendientes.