¿Una API devuelve 500. Qué manejo es más correcto en cliente?

UX robusta exige distinguir diagnóstico técnico y feedback de negocio.

Fetch profesional: contratos HTTP claros y UX resistente

Domina `fetch` en escenarios reales: validación de `response.ok`, parseo seguro, envío de JSON, cancelación de peticiones y manejo de estados UI sin inconsistencias.

¿Cuánto sabes de JavaScript?

📘 Teoría

Contrato HTTP: qué validar siempre antes de renderizar

`fetch` resuelve muchas respuestas con error HTTP; la validación es tu responsabilidad.

`fetch()` solo rechaza por errores de red o cancelación. Un `404` o `500` normalmente llega como `Response` válida a nivel de promesa.

Por eso conviene un patrón fijo: pedir, validar `ok/status`, parsear y recién entonces actualizar UI. Saltarte un paso suele romper experiencia y depuración.

Pedir

Lanzar `fetch(url, options)`.

Método adecuado
Headers correctos

Validar

Comprobar `res.ok` o `res.status`.

No asumir éxito
Error con contexto

Parsear

`res.json()` también puede fallar.

Formato esperado
Try/catch por flujo

Renderizar

Actualizar UI con estado claro.

loading/success/error
Limpieza en finally

GET robusto: validación + parseo + mensaje útil

No basta con pedir datos: hay que detectar respuestas inválidas y explicarlas.

Al consumir endpoints para dashboard o perfiles, un `if (!res.ok)` con error contextual evita que la UI muestre datos vacíos sin explicación.

Encapsular la lectura en una función reusable te permite centralizar política de error y reducir repetición en toda la app.

Usa mensaje de error con endpoint y status.
Mantén `getJson` pequeña y predecible.
En UI, captura error y muestra texto de recuperación.

Helper de lectura segura

async function getJson(url) {
  const res = await fetch(url);

  if (!res.ok) {
    throw new Error(`GET ${url} -> HTTP ${res.status}`);
  }

  return res.json();
}

getJson('https://jsonplaceholder.typicode.com/users/1')
  .then((user) => console.log(user.name))
  .catch((error) => console.error(error.message));

POST con JSON y cabeceras explícitas

Para escribir datos, método y payload deben ser inequívocos.

Enviar objetos JavaScript sin `JSON.stringify` o sin `Content-Type` correcto suele generar respuestas inesperadas o validaciones fallidas en backend.

Un patrón claro de creación: construir payload, enviar, validar respuesta y devolver objeto final para que la UI pueda confirmarlo.

Crear recurso con POST

async function crearTarea(payload) {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
  });

  if (!res.ok) throw new Error(`POST /todos -> HTTP ${res.status}`);
  return res.json();
}

crearTarea({ title: 'Aprender Fetch', completed: false, userId: 1 })
  .then((data) => console.log('Creada:', data.id));

Cancelación y race conditions en búsqueda en vivo

Si llegan respuestas fuera de orden, la UI puede mostrar datos viejos.

En inputs de búsqueda, cada tecla puede disparar una petición. Si no cancelas la anterior, una respuesta lenta puede sobrescribir resultados más recientes.

`AbortController` te permite cortar la petición anterior antes de lanzar la nueva y evitar inconsistencias de estado.

Fetch cancelable

let currentController = null;

async function buscar(query) {
  if (currentController) currentController.abort();
  currentController = new AbortController();

  try {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${query}`, {
      signal: currentController.signal
    });

    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (error) {
    if (error.name === 'AbortError') return null;
    throw error;
  }
}

Estado UI acoplado al flujo de red

Un buen fetch también se nota en cómo se siente la interfaz.

Antes de pedir datos, muestra estado de carga y bloquea acciones duplicadas; al finalizar, libera controles en `finally` para que siempre vuelvan a estado usable.

Cuando hay error, evita mensajes genéricos. Explica el fallo y ofrece siguiente paso: reintentar, revisar conexión o cambiar filtro.

Patrón de UX mínimo

Revisar

runBtn.disabled = true;
statusEl.textContent = 'Cargando datos...';

try {
  const data = await getJson('https://jsonplaceholder.typicode.com/todos/1');
  statusEl.textContent = 'Carga completada ✅';
  render(data);
} catch (error) {
  statusEl.textContent = 'No se pudo cargar. Intenta de nuevo.';
  console.error(error.message);
} finally {
  runBtn.disabled = false;
}

1 Contrato HTTP: qué validar siempre antes de renderizar 2 GET robusto: validación + parseo + mensaje útil 3 POST con JSON y cabeceras explícitas 4 Cancelación y race conditions en búsqueda en vivo 5 Estado UI acoplado al flujo de red

🧪 Aprende probando

Ejemplo Ejemplo guiado: helper reusable para GET Centraliza lectura de JSON y manejo básico de errores HTTP para evitar repetir lógica en cada endpoint.

⌄

Ejemplo Ejemplo guiado: POST para crear feedback Envía datos de formulario serializados en JSON y procesa la respuesta creada del servidor.

⌄

Ejemplo Demo interactiva: inspector de peticiones con cancelación Prueba usuarios por id, cambia rápido de valor y observa cómo se cancelan peticiones antiguas sin ensuciar la UI.

⌄

Ejemplo Demo interactiva: catálogo remoto con fetch y filtros generados Carga productos desde una API, mapea la respuesta a tarjetas y crea filtros a partir de categorías reales del JSON recibido.

⌄

Ejemplo Demo interactiva: AJAX con fetch, loading y error HTTP Carga posts desde una API pública, valida `response.ok`, renderiza tarjetas y compara el caso correcto con un 404 controlado.

⌄

🏁 Retos

Reto Reto 1: GET validado con función `main` Implementa un flujo GET que valide `res.ok`, convierta a JSON y muestre `username` en consola.

⌄

Reto Reto 2: POST con payload JSON y control de error Envía un objeto al endpoint de posts, valida respuesta y muestra `id` creado con manejo de excepciones.

⌄

🧰 Recursos

Enlaces útiles

MDN: Using Fetch API javascript.info: Fetch web.dev: Fetch API error handling MDN: Response MDN: RequestInit MDN: AbortController

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 36

Async/Await avanzado: asincronía clara, segura y escalable

Lección 38

Fetch avanzado: cancelar, reintentar y evitar carreras

›