fetch en JavaScript: cómo pedir datos a una API

fetch pide un recurso por la red y devuelve una promesa con la respuesta; después hay que comprobar response.ok y leer el contenido, normalmente con response.json().

Una petición GET paso a paso

async function cargarUsuarios() {
  const respuesta = await fetch('https://jsonplaceholder.typicode.com/users');

  if (!respuesta.ok) {
    throw new Error('Error HTTP ' + respuesta.status);
  }

  const usuarios = await respuesta.json();
  console.log(usuarios.length);
}

cargarUsuarios().catch(error => console.log('No se pudo cargar:', error.message));

1. fetch(url) envía la petición y espera la respuesta.
2. respuesta.ok es true para códigos 200-299.
3. respuesta.json() convierte el cuerpo de texto en datos de JavaScript. También es una promesa.

Por qué hay que comprobar response.ok

fetch solo rechaza la promesa cuando falla la red (sin conexión, dominio inexistente, bloqueo de CORS). Un 404 o un 500 se consideran respuestas válidas, así que el catch no salta. Si no compruebas ok, intentarás leer como datos lo que puede ser una página de error.

Enviar datos con POST

const respuesta = await fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ titulo: 'Hola', contenido: 'Mensaje' })
});
const creado = await respuesta.json();
console.log(creado.id);

JSON.stringify convierte el objeto en texto y la cabecera Content-Type avisa al servidor del formato.

Mostrar carga, vacío y error

Una interfaz clara distingue cuatro estados:

const salida = document.querySelector('#resultado');

async function mostrar() {
  salida.textContent = 'Cargando…';
  try {
    const respuesta = await fetch('/datos.json');
    if (!respuesta.ok) throw new Error('HTTP ' + respuesta.status);
    const datos = await respuesta.json();
    salida.textContent = datos.length ? datos.length + ' resultados' : 'Sin resultados';
  } catch (error) {
    salida.textContent = 'No se pudo cargar. Inténtalo de nuevo.';
  }
}

Cancelar una petición

const control = new AbortController();
fetch('/datos.json', { signal: control.signal })
  .catch(error => console.log(error.name)); // 'AbortError'
control.abort();

Problemas habituales

• CORS: el navegador bloquea la respuesta si el servidor no la autoriza para tu origen. Se resuelve en el servidor, no en tu código. Consulta la explicación del error de CORS.
• Abrir el HTML con file://: algunas peticiones fallan. Usa un servidor local.
• JSON inválido: si el servidor devuelve HTML, json() lanza un SyntaxError. Revisa la pestaña Red de las herramientas de desarrollo.
• Olvidar await: terminas con una promesa en lugar de datos.

Última actualización: 18 de octubre de 2026. Los ejemplos se han comprobado en un navegador actual y en Node.js.