Mensajes de Estado HTTP

Cada vez que un navegador carga una página, envía un formulario o tu JavaScript realiza una llamada fetch(), el servidor responde con un código de estado HTTP de tres dígitos. Este código le indica al cliente si la solicitud fue exitosa, fue redirigida, falló por algo que hizo el cliente o falló en el servidor. El navegador lo utiliza automáticamente — sigue las redirecciones, muestra su propia página de error para algunos códigos y reutiliza el contenido en caché para otros — pero como desarrollador también lees estos códigos directamente: un formulario se envía y ramificas según la respuesta, o un fetch() se resuelve y compruebas response.ok (que simplemente significa "estado en el rango 200–299").

Aquí puedes encontrar la lista de códigos de estado de respuesta del Protocolo de Transferencia de Hipertexto (HTTP). Estos códigos responden a la solicitud que un cliente hace a un servidor — ya sea que esa solicitud use GET, POST u otro método HTTP — y se agrupan en 5 clases según su primer dígito. Conocerlos te ayuda a depurar enlaces rotos, URLs incorrectas, envíos de formularios fallidos y respuestas de API inesperadas. Repasemos cada clase:

Manejo de códigos de estado en JavaScript

Cuando envías un formulario o llamas a una API con fetch(), la solicitud tiene éxito (la promesa se resuelve) incluso cuando el servidor devuelve un error 4xx o 5xx — un 404 o 500 sigue siendo una respuesta HTTP válida, no un error de red. Por eso debes inspeccionar el estado tú mismo. El atajo conveniente es response.ok, que es true solo para el rango 200–299; para cualquier otro caso, ramificas según response.status para reaccionar apropiadamente:

const form = document.querySelector("#signup");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const response = await fetch("/api/signup", {
    method: "POST",
    body: new FormData(form),
  });

  if (response.ok) {
    // 200–299: success
    window.location.href = "/welcome";
  } else if (response.status === 401) {
    showMessage("Please log in first.");
  } else if (response.status === 422) {
    // Validation errors returned as JSON
    const data = await response.json();
    showMessage(data.error);
  } else if (response.status === 429) {
    // Rate limited — respect the Retry-After header
    const wait = response.headers.get("Retry-After");
    showMessage(`Too many attempts. Try again in ${wait}s.`);
  } else if (response.status >= 500) {
    showMessage("Server error — please try again later.");
  } else {
    showMessage(`Unexpected error (${response.status}).`);
  }
});

Ten en cuenta que fetch() solo rechaza ante problemas de red genuinos (sin conexión, bloqueo CORS, fallo de DNS), por lo que envolver la llamada en try…catch maneja esos casos, mientras que el if/else anterior maneja el estado HTTP en sí.

1xx: Información

2xx: Exitoso

3xx: Redirección

Los códigos no listados aquí (como el 305 y el 306) están obsoletos, son raros o son específicos de extensiones.

4xx: Error del Cliente

Los códigos no listados aquí (como el 419, el 420 y varios en el rango 423–431) son raros, específicos de frameworks o no estándar. Algunos — como el 421 (Solicitud Mal Dirigida, usado en HTTP/2) y el 451 anterior — están estandarizados pero son poco frecuentes en el trabajo cotidiano.

5xx: Error del Servidor

Capítulos Relacionados

El estado que devuelve un servidor a menudo depende de la propia solicitud. Para profundizar, consulta:

• Métodos HTTP — GET, POST y sus variantes, que determinan cómo se comportan algunas redirecciones (302 vs 307).
• Formularios HTML — cómo los envíos de formularios desencadenan solicitudes que pueden devolver 303, 422 o 429.
• URL HTML (Localizadores Uniformes de Recursos) — las direcciones a las que apuntan las redirecciones 3xx y las respuestas 404.

Práctica