Gestión de errores y códigos de estado
Compruebe response.ok y gestione los fallos.
Gestión de errores y códigos de estado es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Fetch no rechaza las respuestas con errores HTTP
Hay un detalle inesperado: fetch solo rechaza la promesa cuando se producen fallos de red. Una respuesta 404 o 500 se resuelve correctamente. Debe comprobar el estado por su cuenta.
Comprobación de response.ok
response.ok es true únicamente para los códigos de estado del rango 200-299. Utilícelo para detectar errores HTTP.
const response = await fetch(url);
if (!response.ok) {
console.log("HTTP error:", response.status);
}Lectura del código de estado
response.status proporciona el código numérico y response.statusText, un mensaje breve. Utilice estos valores para gestionar casos específicos.
if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");Lanzamiento ante un estado incorrecto
Un patrón claro consiste en lanzar un Error cuando la respuesta no es correcta, de modo que un único catch gestione tanto los fallos de red como los errores HTTP.
if (!response.ok) {
throw new Error("Request failed: " + response.status);
}Envoltorio con try/catch
Con async/await, envuelva todo el flujo en try/catch. Los errores de red rechazan la Promise y llegan a catch; el error HTTP que lance también lo hace.
try {
const res = await fetch(url);
if (!res.ok) throw new Error("Status " + res.status);
const data = await res.json();
} catch (err) {
console.log("Failed:", err.message);
}Distinción entre tipos de error
Un fetch rechazado normalmente significa que no se pudo acceder al servidor, que DNS falló o que CORS lo bloqueó. Una respuesta que no es correcta significa que el servidor respondió, pero con un error. Gestiónelos de forma diferente cuando sea importante.
Lectura de los cuerpos de error
A menudo, las API devuelven JSON con información sobre el error. Léalo antes de lanzar el error para poder mostrar un mensaje útil.
if (!res.ok) {
const errBody = await res.json().catch(() => ({}));
throw new Error(errBody.message || ("Status " + res.status));
}Códigos de estado habituales
Conozca las familias: 2xx, éxito; 3xx, redirección; 4xx, error del cliente (ha enviado algo incorrecto); 5xx, error del servidor (el problema está en el servidor). Fetch sigue automáticamente la mayoría de las redirecciones.
Un auxiliar reutilizable
Centralice la comprobación en un único auxiliar para que todas las llamadas gestionen los errores de forma coherente.
async function getJSON(url) {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json();
}Reintento de fallos transitorios
En redes inestables, puede reintentar las solicitudes ante errores 5xx o errores de red. Mantenga pocos reintentos y añada una espera para no sobrecargar el servidor.
for (let i = 0; i < 3; i++) {
try { return await getJSON(url); }
catch (e) { if (i === 2) throw e; }
}Mostrar los errores al usuario
Capture los errores en la capa de interfaz para mostrar un mensaje claro en lugar de una pantalla en blanco. No permita nunca que un rechazo no gestionado oculte silenciosamente una solicitud fallida.
getJSON(url)
.then(render)
.catch(() => showToast("Could not load data"));Comprobación rápida
Gestión de errores de Fetch.
Resumen
Fetch solo rechaza las promesas ante fallos de red, por lo que siempre debe comprobar response.ok/response.status y lanzar un error ante estados incorrectos. Envuelva las llamadas en try/catch, lea los cuerpos de error para obtener mensajes, centralice la comprobación en un auxiliar y muestre errores claros en la interfaz.
Preguntas frecuentes
¿La lección «Gestión de errores y códigos de estado» es gratis?
Sí — el texto completo de «Gestión de errores y códigos de estado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Gestión de errores y códigos de estado»?
Compruebe response.ok y gestione los fallos. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Gestión de errores y códigos de estado»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Realización de solicitudes GET
- POST y envío de datos
- Gestión de errores y códigos de estado
- Cancelación de solicitudes con AbortController