Función fetch para peticiones HTTP a APIs REST

Aprende a consumir una API REST con autoridad usando fetch en JavaScript. Verás cómo leer el Response, convertir el body con .json(), manejar errores con response.ok y catch, y configurar verbos y headers como Content-Type y Accept. Todo con ejemplos claros y prácticos.

¿Cómo usar fetch en JavaScript para consumir una API REST?

Para realizar peticiones HTTP modernas, los navegadores exponen la función fetch. Esta función recibe como primer parámetro el origen o endpoint y retorna una promesa. Por eso es clave dominar el asincronismo con then o con async/await.

• fetch retorna un objeto Response con metadatos útiles: status, ok, headers y acceso al body.
• El body no es legible directamente: debes convertirlo con el método adecuado como .json().
• El body se puede consumir una sola vez. Si necesitas leerlo de nuevo, repite la solicitud.

¿Qué retorna fetch y cómo leer el response?

El primer .then recibe el Response. Ahí puedes verificar el estado y luego convertir el body a JSON.

fetch('https://api.ejemplo.com/endpoint')
  .then(r => {
    console.log('status:', r.status, 'ok:', r.ok);
    return r.json();
  })
  .then(jsonResponse => {
    console.log('JSON:', jsonResponse);
  });

• status 200 indica éxito.
• ok es un booleano para saber si la petición fue exitosa.
• Usa r.json() para obtener el cuerpo como objeto JavaScript.

¿Cómo convertir el body con json y encadenar then?

El método .json() devuelve otra promesa. Puedes encadenar múltiples then para procesar la respuesta paso a paso.

fetch('https://api.ejemplo.com/productos')
  .then(r => r.json())
  .then(lista => {
    console.log('Productos:', lista);
  });

• Ideal para transformaciones simples.
• Mantén el encadenamiento claro y legible.

¿Por qué async/await simplifica el flujo?

Cuando el proceso es más complejo, usa async/await. El código es más directo y fácil de leer.

const response = await fetch('https://api.ejemplo.com/productos');
if (!response.ok) {
  throw new Error('No es posible procesar la solicitud.');
}
const jsonResponse = await response.json();
console.log(jsonResponse);

• await espera a que la promesa se resuelva.
• response.ok sirve para validar antes de leer el body.

¿Cómo manejar errores con fetch: ok, status y catch?

Hay dos grandes escenarios de error. Uno, cuando el servidor responde con error HTTP pero hay Response. Dos, cuando existe un fallo de conexión y no hay Response.

¿Qué diferencia hay entre error de red y error HTTP?

• Error HTTP: la API responde con status distinto de 2xx y ok es false.
• Error de red o protocolo: no hay Response y fetch lanza una excepción (por ejemplo, TypeError: failed to fetch).

¿Cómo lanzar excepciones cuando response.ok es false?

Valida response.ok. Si es false, lanza un error con un mensaje útil.

const r = await fetch('https://api.ejemplo.com/productos/1');
if (!r.ok) {
  throw new Error('No es posible encontrar el recurso.');
}
const data = await r.json();
console.log(data);

• Útil para controlar flujos cuando el recurso no existe.
• Permite separar errores esperados de problemas de red.

¿Cómo capturar errores con then y catch?

Con el estilo de promesas, usa .catch para atrapar fallos de red.

fetch('https://api.ejemplo.com/productos/1')
  .then(r => r.json())
  .then(json => console.log(json))
  .catch(err => console.error('Error en la petición:', err));

• .catch captura errores de conexión o de ejecución en la cadena.
• Para errores HTTP, decide según status o ok antes de .json().

¿Cómo procesar distintos content-type y configurar verbos y headers?

Según el Content-Type, debes elegir el método de lectura correcto del body. Además, fetch permite cambiar el verbo HTTP y enviar headers personalizados.

¿Cómo leer blobs e imágenes con blob?

Para imágenes u otros archivos binarios, usa .blob(). Recuerda no invocar dos veces el método de lectura del body.

const imageRequest = await fetch('https://sitio.com/imagen.png');
console.log('status:', imageRequest.status);
const imageBlob = await imageRequest.blob();
console.log('Blob:', imageBlob.type, imageBlob.size);

• Detecta el tipo con headers.get('content-type').
• Usa blob para imágenes, audio o video.

¿Cómo leer texto con text y usar content-type?

Cuando el servidor responde texto plano, utiliza .text() y el header correcto.

const request = await fetch('/llms.txt');
console.log(request.headers.get('content-type')); // text/plain
const contenido = await request.text();
console.log(contenido);

• text/plain indica que debes usar .text().
• application/json indica que debes usar .json().

¿Cómo enviar method, headers y tokens de autorización?

El segundo parámetro de fetch permite personalizar el verbo y los headers.

await fetch('https://api.ejemplo.com/productos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Authorization': 'JWT <token>'
  }
});

• Por defecto el método es GET.
• Puedes usar POST, PUT, PATCH o DELETE.
• Define Content-Type y Accept según lo que envías y esperas recibir.

¿Tienes dudas puntuales sobre fetch, async/await o el manejo de headers? Comenta qué caso quieres implementar y lo resolvemos juntos.