Guía práctica: API fetch

Explicación breve, pasos y ejemplos interactivos para aprender a usar fetch en el navegador.

¿Qué es fetch?

Es una API nativa del navegador para realizar peticiones HTTP de forma asíncrona. Devuelve una Promise que resuelve en un objeto Response.

Cómo funciona (paso a paso)

  1. Llamas a fetch(url, options). Opcional: method, headers, body.
  2. Recibes una Promise; cuando resuelve obtienes un Response.
  3. Compruebas response.ok o response.status para detectar errores HTTP.
  4. Lees el cuerpo con response.json(), response.text() o response.blob() (estas también devuelven Promises).
  5. Manejas errores de red con try/catch o .catch(). Nota: fetch RECHAZA la Promise solo por fallos de red; respuestas 4xx/5xx no rechazan por sí mismas.

Ejemplos interactivos

1) GET simple (Random User)

Obtiene un usuario aleatorio desde randomuser.me y muestra su foto y nombre.

// Código usado en el ejemplo:
async function simpleGet(){
  const res = await fetch('https://randomuser.me/api/');
  if (!res.ok) throw new Error(res.status);
  const data = await res.json();
  return data.results[0];
}
Salida del GET aquí

2) POST JSON (jsonplaceholder)

Envía un objeto JSON a jsonplaceholder.typicode.com (API de prueba).

// Código usado en el ejemplo:
async function postJson(){
  const res = await fetch('https://jsonplaceholder.typicode.com/posts',{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({title:'Hola',body:'Contenido',userId:1})
  });
  return await res.json();
}
Salida del POST aquí

3) Manejo de errores y response.ok

Demuestra comprobar response.ok y capturar excepciones.

// Código usado:
async function withErrors(){
  try{
    const res = await fetch('https://httpstat.us/500');
    if(!res.ok) throw new Error('HTTP ' + res.status);
    return await res.text();
  }catch(e){
    throw e;
  }
}
Salida de errores aquí

Buenas prácticas rápidas