DEV Community

Cover image for Por fin entiendo Fetch de una vez por todas
FoodieHoodie
FoodieHoodie

Posted on

Por fin entiendo Fetch de una vez por todas

#javascript #webdev #spanish #programming

Entender cómo fetch maneja los éxitos y errores es muy interesante y funciona de una forma bastante diferente a lo que estamos acostumbrados con AXIOS.

Solo considera un error de red (falla de conexión) como un rechazo de la Promise; el resto se considera éxito. Al fin y al cabo, se conectó al servidor y entregó el mensaje, aunque el servidor no haya podido procesar algo. Es algo muy parecido a lo que hace GraphQL.

Bien, vamos a la guía definitiva de cómo interpretar los retornos de fetch:

1. El Éxito (La Promise se resuelve)

A diferencia de bibliotecas como Axios, fetch resuelve la Promise incluso si el servidor devuelve un error HTTP (como 404 o 500). Para el navegador, si el servidor respondió, el "transporte" del mensaje fue correcto.

El Objeto Response

Cuando la Promise se resuelve, entrega un objeto Response. Los campos principales para validar el éxito son:

  • response.ok: Un booleano que es true si el status code está entre 200 y 299. Es la forma más sencilla de validar.
  • response.status: El número exacto del status code (ej: 200, 201, 404).
  • response.statusText: El mensaje de estado (ej: "OK" o "Not Found").

2. El Error de Lógica (Status HTTP de error)

Si el servidor responde 404 (No encontrado) o 500 (Error interno), el código entrará en el bloque .then() y no en el .catch().

Para manejar esto, siempre debes verificar el ok:

fetch('https://api.ejemplo.com/datos')
  .then(response => {
    if (!response.ok) {
      // Aquí manejas errores de permiso (401), no encontrado (404), etc.
      throw new Error(`¡Error HTTP! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => {
    // Solo llega aquí si se cae la red o si se dispara el 'throw' de arriba
    console.error("Hubo un problema con la petición:", error);
  });
Enter fullscreen mode Exit fullscreen mode

3. El Error de Red (La Promise se rechaza)

fetch solo va directo al .catch() (rechazo) en escenarios donde la petición no pudo completarse:

  • Caída de conexión/Internet: El usuario se quedó offline.
  • Error de DNS: El dominio no existe.
  • CORS: El servidor no permite que tu origen acceda a los datos (error de seguridad).
  • Petición abortada: Cuando usas un AbortController para cancelar la llamada.

Resumen Visual de los Retornos

Escenario Status HTTP response.ok Bloque Ejecutado
Éxito Total 200 - 299 true .then()
Error del Cliente 400 - 499 false .then() (Requiere validación manual)
Error del Servidor 500 - 599 false .then() (Requiere validación manual)
Error de Red/CORS Ninguno N/A .catch()

Top comments (0)