Peticiones HTTP con Fetch en JavaScript

La función Fetch es la herramienta nativa de los navegadores modernos para hacer peticiones HTTP a APIs REST desde JavaScript. Si quieres aprender a consumir una API, manipular respuestas y manejar errores con código limpio, aquí tienes lo esencial para dominar Fetch desde la consola del navegador.

¿Qué es Fetch y cómo hace una petición HTTP?

Fetch es una función global del navegador que recibe como primer parámetro el origen o URL al que quieres hacer la solicitud. Al ejecutarla, retorna una promesa, lo que significa que necesitas manejar su resolución antes de acceder a los datos [01:00].

La forma clásica es encadenar un then para capturar la respuesta cuando la promesa se resuelva:

javascript fetch("https://api.escuelajs.co/api/v1/products") .then(r => r.json()) .then(jsonResponse => console.log(jsonResponse));

Lo primero que retorna Fetch no es la información de la API, sino un objeto response con metadatos muy útiles: el estatus HTTP, los headers y un campo ok que indica si la petición fue exitosa.

¿Qué retorna fetch en JavaScript? Retorna una promesa que resuelve un objeto Response con metadatos como status, headers y un body que debes procesar con métodos como json, blob o text.

¿Cómo accedo al body de la respuesta con json?

El body de una respuesta no viene listo para usarse. Para obtenerlo necesitas invocar otra promesa con el método .json(), que parsea el contenido y te entrega el objeto JavaScript final [02:30].

Esta cadena de promesas funciona bien para casos simples, pero cuando manipulas información compleja conviene usar async/await, que hace el código mucho más legible:

javascript const response = await fetch("https://api.escuelajs.co/api/v1/products"); const jsonResponse = await response.json();

Sin el await, la constante response quedaría como una promesa pendiente. Con await le dices a JavaScript que espere hasta que la petición se resuelva antes de continuar.

¿Cómo manejo errores en fetch?

Fetch es generoso con los errores: si la API responde con un código de error como un 404 o un 400, igual te entrega el objeto response, pero con response.ok en false. Puedes validarlo así:

javascript if (!response.ok) { throw new Error("No es posible encontrar el producto"); }

En cambio, cuando hay un error de conexión (por ejemplo, un protocolo inexistente como httpx:// o un dominio que no existe), Fetch sí lanza una excepción real. Ese error lo puedes capturar con un bloque try/catch o con el método .catch() si trabajas con promesas encadenadas [05:00].

¿Cuándo fetch lanza un error? Solo cuando hay fallos de red o conexión. Si la API responde con 400 o 500, fetch considera la petición exitosa y debes validar response.ok manualmente.

¿Cómo manipulo respuestas que no son JSON?

No todas las APIs responden en JSON. El método .json() falla si el contenido es una imagen, un audio o texto plano. Para esos casos existen otros métodos según el tipo de contenido:

• .json() para respuestas tipo application/json.
• .blob() para imágenes, videos o archivos binarios.
• .text() para respuestas de tipo text/plain.

Un detalle importante: el body de un response solo se puede consumir una vez. Si invocas .blob() y luego intentas .json() sobre el mismo response, vas a recibir un error que dice que el body ya fue usado. La solución es volver a hacer la petición [07:30].

¿Cómo sé qué método usar según la respuesta?

La clave está en el header Content-Type que devuelve el servidor. Puedes inspeccionarlo así:

javascript const request = await fetch("https://platzi.com/llms.txt"); const contentType = request.headers.get("Content-Type");

Si el Content-Type es application/json, usas .json(). Si es text/plain, usas .text(). Si es una imagen o archivo binario, usas .blob(). Por ejemplo, el archivo llms.txt de Platzi devuelve texto plano con información sobre la plataforma [09:00].

¿Cómo cambio el verbo HTTP y envío headers personalizados?

Por defecto, Fetch usa el verbo GET. Para modificarlo, el segundo parámetro de fetch es un objeto de configuración donde puedes especificar el método y los headers que necesites:

javascript fetch("https://api.escuelajs.co/api/v1/products", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json", "Authorization": "Bearer TU_TOKEN_AQUI" } });

Puedes usar cualquier verbo válido del protocolo HTTP: POST, PUT, PATCH o DELETE. Los headers más comunes incluyen:

• Content-Type: indica el formato del contenido que envías.
• Accept: especifica el formato que esperas recibir.
• Authorization: envía el token de autenticación, normalmente con el esquema Bearer seguido de un JWT.

Con estos elementos ya tienes el control completo sobre tus peticiones: cambiar el verbo, enviar headers de autenticación y procesar respuestas en cualquier formato. ¿Qué API te gustaría consumir primero con Fetch? Cuéntalo en los comentarios.