Marc Semper Lloret
← El DOM: la web que responde

Sesión 15 · Semana 5

fetch y los tres estados

Hoy · Hoja de ruta

  1. 1. Aprende: Cómo se piden datos a un servidor y qué puede salir mal.
  2. 2. Haz: Carga tu catálogo desde una API con sus estados de carga, error y vacío.
  3. 3. Comprueba: Con la red simulada lenta o caída, tu página se comporta bien.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Qué ve tu usuario mientras los datos tardan tres segundos?
  2. ¿Y si el servidor responde con un error?
  3. ¿En qué se parece esto a lo que hacías con un cliente HTTP en clase?

Pedir datos

export async function obtenerProductos() {
  const respuesta = await fetch("/api/productos");

  if (!respuesta.ok) {
    throw new Error(`El servidor respondió ${respuesta.status}`);
  }

  return respuesta.json();
}

Un 404 no rechaza la promesa

fetch solo falla si no hubo respuesta: sin red, DNS caído, petición cancelada. Un 404 o un 500 son una respuesta, así que la promesa se cumple y tu código sigue como si nada, con un cuerpo que no es lo que esperabas.

Por eso la comprobación de respuesta.ok no es opcional: es la línea que convierte un error del servidor en un error de tu programa.

Las dos fases importan: fetch resuelve cuando llegan las cabeceras, y .json() es una segunda promesa que se resuelve al terminar de leer el cuerpo. De ahí los dos await.

Los tres estados de cualquier carga

Lo que tiene que contemplar toda petición
  1. Cargando
  2. Error
  3. Vacío
  4. Datos
async function cargar() {
  estado.cargando = true;
  estado.error = null;
  actualizar();

  try {
    estado.productos = await obtenerProductos();
  } catch (error) {
    estado.error = "No se pudo cargar el catálogo. Inténtalo de nuevo.";
  } finally {
    estado.cargando = false;
    actualizar();
  }
}

El estado que montaste en la sesión 10 ya tenía sitio para cargando y error: la función de render decide qué pintar en cada caso, y ninguna otra parte del código se entera de nada.

El mensaje de error es para la persona; el detalle, para la consola

«No se pudo cargar el catálogo. Inténtalo de nuevo» es útil. «TypeError: Failed to fetch» no lo es, y además cuenta cosas de tu sistema que no hacen falta ahí.

Registra el error técnico con console.error y muestra el mensaje humano, con una salida: reintentar, volver, avisar.

Probarlo de verdad

En DevTools, pestaña Network, puedes simular una red lenta o desconectada. Es la única forma de ver tus estados: con la red local todo va tan rápido que el indicador de carga no se llega a ver.

Comprueba las cuatro situaciones: carga normal, red lenta, sin red y respuesta con error del servidor.

CORS, el error que verás

Si pides datos a otro dominio y no ha dado permiso, el navegador bloquea la respuesta y la consola informa de un error de CORS. No se trata de un defecto del código propio, sino de una política de seguridad del navegador que se resuelve en el servidor. Lo harás tú mismo en la UD6.

Tarea 15 · Catálogo desde la red

  1. Coloca tu catálogo como fichero .json y cárgalo con fetch.
  2. Comprueba respuesta.ok y lanza un error con el código de estado.
  3. Añade al estado cargando y error, y píntalos.
  4. Muestra un indicador de carga y un mensaje de error con botón de reintentar.
  5. Prueba las cuatro situaciones con Network.
  6. Consume además una API pública real y observa su respuesta.
Objetivo mínimoCarga desde fichero JSON con los tres estados pintados.
Si lo tienesBotón de reintentar que vuelve a lanzar la carga.
RetoCancela una petición en curso con AbortController cuando llega otra.

Cierre de la semana 5

  • Explicas por qué JavaScript no espera y qué es una promesa.
  • Usas async/await con errores capturados.
  • Compruebas respuesta.ok en toda petición.
  • Tu página contempla cargando, error, vacío y datos.
Ver respuestas

1 · Porque el 404 es una respuesta válida: la promesa se cumple y hay que mirar ok o status.

2 · Cargando, error, vacío y datos.

3 · Es una política del navegador sobre peticiones a otro origen, y se resuelve en el servidor.

Microprueba semanal 5 · 5–10 minutos

Individual, sin IA y sin apuntes.

  1. Predice el orden de tres líneas con un setTimeout de cero milisegundos en medio.
  2. ¿Por qué un 404 no rechaza la promesa de fetch? Escribe la comprobación que falta.
  3. Nombra los cuatro estados de una carga.
---