Cómo usar fetch en JavaScript para llamar a una API

fetch() es la función de JavaScript para pedir recursos por la red, por ejemplo los datos de una API. Según MDN, proporciona una forma sencilla y lógica de obtener recursos de forma asíncrona. En su versión más simple toma un argumento, la dirección del recurso, y devuelve una promesa con la respuesta.

Una petición básica

fetch('https://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

Qué ocurre:

1. fetch() pide el recurso y devuelve una promesa que contiene un objeto Response.
2. Esa respuesta es la respuesta HTTP, no el JSON en sí.
3. Para extraer el contenido en JSON se usa el método response.json(), que devuelve otra promesa con los datos.

Si no sabes qué es una API o el formato JSON, empieza por qué es una API y JSON.

Con async y await

La misma petición, más fácil de leer:

async function cargarDatos() {
  const response = await fetch('https://example.com/movies.json');
  const data = await response.json();
  console.log(data);
}

Cuidado: fetch no falla con un 404 o un 500

Es el detalle que más confunde. MDN explica que la promesa de fetch() no se rechaza con un estado de error HTTP, aunque la respuesta sea un 404 o un 500. Se resuelve con normalidad, con la propiedad ok en false. Solo se rechaza ante un fallo de red o si algo impidió completar la solicitud. Por eso conviene comprobarlo:

const response = await fetch(url);
if (!response.ok) {
  throw new Error('Error HTTP ' + response.status);
}
const data = await response.json();

Para saber qué significan esos códigos, lee qué es un servidor web.

Enviar datos con POST

fetch() admite un segundo parámetro, un objeto de opciones. Para enviar un JSON:

async function enviar(url, datos) {
  const response = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(datos),
  });
  return response.json();
}

Cookies y credenciales

Por defecto, fetch no envía ni recibe cookies de otros orígenes, lo que puede dar peticiones no autenticadas si el sitio usa sesión. MDN indica que desde 2017 la política por defecto de las credenciales es same-origin; para enviarlas hay que configurar la opción credentials.

Para practicar

Prueba con una API pública que devuelva JSON y revisa el resultado en la consola del navegador. Si necesitas ver el JSON ordenado, usa el formateador de JSON. Y si algo falla, depurar errores en programación te da un método.