La API Fetch en JavaScript: guía práctica

La API Fetch es la forma moderna, basada en promesas, de hacer peticiones HTTP desde el navegador. Reemplaza al antiguo XMLHttpRequest con una interfaz más limpia que funciona de forma natural con async/await y los streams. Todos los navegadores actuales la admiten.

Una primera petición GET

fetch() devuelve una promesa que se resuelve en un objeto Response. Para leer el JSON, se llama a response.json(), que a su vez devuelve una promesa:

const res = await fetch('https://api.example.com/articles');
const data = await res.json();
console.log(data);

Lo mismo sin async/await, usando cadenas de .then():

fetch('https://api.example.com/articles')
  .then((res) => res.json())
  .then((data) => console.log(data));

El truco: fetch no rechaza ante errores HTTP

Esto sorprende a casi todo el mundo. Una respuesta 404 o 500 sigue siendo un fetch exitoso — la promesa solo se rechaza ante un fallo de red (sin conexión, DNS, CORS). Debes comprobar response.ok tú mismo:

const res = await fetch(url);
if (!res.ok) {
  throw new Error(`HTTP ${res.status} ${res.statusText}`);
}
const data = await res.json();

Un conmutador de red con cables, que representa los datos que viajan entre cliente y servidor — Cada llamada `fetch()` envía una petición HTTP a través de la red hacia un servidor y espera a que la respuesta haga el camino de vuelta.

Enviar datos con POST

Pasa un segundo argumento de opciones para definir el método, las cabeceras y el cuerpo. Para JSON, serializa la carga útil y define el Content-Type:

const res = await fetch('/api/articles', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Hola', body: 'Mundo' }),
});
const created = await res.json();

Cancelar una petición

Usa un AbortController para cancelar una petición — útil para tiempos de espera o cuando un componente se desmonta:

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 5000);

try {
  const res = await fetch(url, { signal: controller.signal });
  const data = await res.json();
} catch (err) {
  if (err.name === 'AbortError') console.log('Petición expirada');
} finally {
  clearTimeout(timeout);
}

Referencia rápida

Tarea	Cómo
Leer JSON	`await res.json()`
Leer texto	`await res.text()`
Comprobar el éxito	`res.ok` / `res.status`
Enviar JSON	`body: JSON.stringify(...)` + `Content-Type`
Cancelar	`AbortController` + `signal`

Esto cubre los casos del día a día. La API Fetch también admite el streaming de cuerpos de respuesta, las subidas con FormData y la clonación de petición/respuesta — pero los patrones anteriores cubren la gran mayoría de las llamadas reales.