Fetch API con async/await en JavaScript

La forma moderna de hacer peticiones HTTP

Fetch API es la forma nativa de hacer peticiones HTTP en JavaScript. Combinada con async/await, el código es limpio y legible.

Solución rápida

async function fetchData(url) {
  const res = await fetch(url);

  if (!res.ok) {
    throw new Error(`Error HTTP: ${res.status}`);
  }

  const data = await res.json();
  return data;
}

// Uso
const usuarios = await fetchData('https://api.example.com/usuarios');
console.log(usuarios);

Explicación paso a paso

1. Función async

async function fetchData(url) {
  // El código async va aquí
}

async permite usar await dentro de la función.

2. Hacer la petición

const res = await fetch(url);

fetch() devuelve una promesa. await espera la respuesta.

3. Verificar la respuesta

if (!res.ok) {
  throw new Error(`Error HTTP: ${res.status}`);
}

⚠️ Importante: Fetch no rechaza la promesa en errores HTTP (404, 500). Debes verificar res.ok manualmente.

4. Parsear los datos

const data = await res.json();
return data;

Ejemplo completo con manejo de errores

async function getUsuarios() {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/users');

    if (!res.ok) {
      throw new Error(`Error ${res.status}: ${res.statusText}`);
    }

    const usuarios = await res.json();
    return usuarios;

  } catch (error) {
    console.error('Error al obtener usuarios:', error.message);
    return [];
  }
}

// Llamar a la función
const usuarios = await getUsuarios();
usuarios.forEach(u => console.log(u.name));

POST con datos JSON

async function crearUsuario(datos) {
  const res = await fetch('https://api.example.com/usuarios', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(datos),
  });

  return res.json();
}

// Uso
const nuevoUsuario = await crearUsuario({
  nombre: 'Juan',
  email: 'juan@example.com'
});

Opciones comunes de Fetch

Opción	Descripción	Ejemplo
method	Método HTTP	'GET', 'POST', 'PUT', 'DELETE'
headers	Cabeceras	{'Content-Type': 'application/json'}
body	Cuerpo de la petición	JSON.stringify(datos)
credentials	Enviar cookies	'include', 'same-origin'
signal	AbortController	AbortSignal.timeout(5000)

Timeout con AbortController

async function fetchConTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const res = await fetch(url, { signal: controller.signal });
    return await res.json();
  } finally {
    clearTimeout(timeoutId);
  }
}

Compatibilidad

Fetch API tiene soporte del 97%+ en navegadores modernos. Para soporte legacy, considera usar axios o un polyfill.