Fetch API

Aprende a hacer peticiones HTTP con la Fetch API de JavaScript

Fetch API

La Fetch API proporciona una interfaz moderna para hacer peticiones HTTP desde el navegador. Es la forma estándar de comunicarse con servidores y obtener datos desde JavaScript.

¿Qué es Fetch?

fetch() es una función global que retorna una Promise. Te permite hacer peticiones HTTP de forma asíncrona:

fetch('https://api.ejemplo.com/datos')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Fetch reemplaza a la antigua API XMLHttpRequest (XHR). Es más simple, poderosa y usa Promises en lugar de callbacks.

Sintaxis Básica

Con Promises (.then)

const url = "https://jsonplaceholder.typicode.com/users";

function cargarUsuariosThen() {
  usersOutput.textContent = "Cargando...";
  fetch(url)
    .then(function (response) {
      if (!response.ok) {
        throw new Error("HTTP status " + response.status);
      }
      return response.json();
    })
    .then(function (data) {
      console.log("Users (.then):", data);
      printUsers(data);
    })
    .catch(function (error) {
      console.log(error);
      usersOutput.textContent = error;
    });
}

Con Async/Await

async function cargarUsuariosAsync() {
  usersOutput.textContent = "Cargando...";
  try {
    var response = await fetch(url);
    if (!response.ok) {
      throw new Error("HTTP status " + response.status);
    }
    var data = await response.json();
    console.log("Users (async/await):", data);
    printUsers(data);
  } catch (error) {
    console.log(error);
    usersOutput.textContent = error;
  }
}

El enfoque async/await es generalmente más fácil de leer y mantener, especialmente para operaciones múltiples.

Hacer una Petición GET

El método por defecto de fetch es GET:

// Petición GET simple
fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
    console.log('Usuarios:', users);
  });

GET con Parámetros

Para agregar parámetros de consulta, consérvelos en la URL:

const userId = 1;
const url = `https://jsonplaceholder.typicode.com/users/${userId}`;

fetch(url)
  .then(response => response.json())
  .then(user => {
    console.log('Usuario:', user);
  });

O usa URLSearchParams para construir query strings:

const params = new URLSearchParams({
  page: 1,
  limit: 10,
  sort: 'name'
});

fetch(`https://api.ejemplo.com/users?${params}`)
  .then(response => response.json())
  .then(data => console.log(data));

Hacer Peticiones POST

Para enviar datos al servidor:

const nuevoUsuario = {
  name: 'Juan',
  email: '[e-mail]'
};

fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(nuevoUsuario)
})
  .then(response => response.json())
  .then(data => {
    console.log('Usuario creado:', data);
  })
  .catch(error => {
    console.error('Error al crear usuario:', error);
  });

Opciones de Fetch

El segundo parámetro de fetch() es un objeto de configuración:

method

El método HTTP a usar.

fetch(url, {
  method: 'POST' // 'GET', 'POST', 'PUT', 'DELETE', 'PATCH', etc.
})

headers

Cabeceras HTTP para enviar con la petición.

fetch(url, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123',
    'Accept': 'application/json'
  }
})

body

Datos a enviar (para POST, PUT, PATCH).

fetch(url, {
  method: 'POST',
  body: JSON.stringify({ name: 'Juan' })
})

También puede ser FormData, Blob, o texto plano.

credentials

Si incluir cookies en la petición.

fetch(url, {
  credentials: 'include' // 'omit', 'same-origin', 'include'
})

mode

El modo CORS de la petición.

fetch(url, {
  mode: 'cors' // 'cors', 'no-cors', 'same-origin'
})

Otros Métodos HTTP

PUT

Actualizar un recurso completamente.

fetch('https://api.ejemplo.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Juan Actualizado',
    email: '[e-mail]'
  })
});

PATCH

Actualizar parcialmente un recurso.

fetch('https://api.ejemplo.com/users/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: '[e-mail]'
  })
});

DELETE

Eliminar un recurso.

fetch('https://api.ejemplo.com/users/1', {
  method: 'DELETE'
})
  .then(response => {
    if (response.ok) {
      console.log('Usuario eliminado');
    }
  });

Ejemplo Completo del Proyecto

Este es el ejemplo real de carga de usuarios del proyecto:

const btnUsersThen = document.getElementById("users-then");
const btnUsersAsync = document.getElementById("users-async");
const usersOutput = document.getElementById("users-output");
const url = "https://jsonplaceholder.typicode.com/users";

function printUsers(usersList) {
  var users = [];
  for (var i = 0; i < usersList.length; i++) {
    var user = usersList[i];
    var userDataFormatted = user.id + " - " + user.name + " (" + user.email + ")";
    users.push(userDataFormatted);
  }
  usersOutput.textContent = users.join("\n");
}

// Versión con .then
function cargarUsuariosThen() {
  usersOutput.textContent = "Cargando...";
  fetch(url)
    .then(function (response) {
      if (!response.ok) {
        throw new Error("HTTP status " + response.status);
      }
      return response.json();
    })
    .then(function (data) {
      console.log("Users (.then):", data);
      printUsers(data);
    })
    .catch(function (error) {
      console.log(error);
      usersOutput.textContent = error;
    });
}

btnUsersThen.addEventListener("click", cargarUsuariosThen);

// Versión con async/await
async function cargarUsuariosAsync() {
  usersOutput.textContent = "Cargando...";
  try {
    var response = await fetch(url);
    if (!response.ok) {
      throw new Error("HTTP status " + response.status);
    }
    var data = await response.json();
    console.log("Users (async/await):", data);
    printUsers(data);
  } catch (error) {
    console.log(error);
    usersOutput.textContent = error;
  }
}

btnUsersAsync.addEventListener("click", cargarUsuariosAsync);

Buenas Prácticas

1. Verifica response.ok

   Fetch no rechaza la Promise en errores HTTP (404, 500, etc.). Debes verificar manualmente.

   const response = await fetch(url);
   if (!response.ok) {
     throw new Error(`HTTP error ${response.status}`);
   }
   
2. Maneja errores de red

   Siempre usa try/catch o .catch() para errores de red.

   try {
     const response = await fetch(url);
     // ...
   } catch (error) {
     console.error('Error de red:', error);
   }
   
3. Muestra feedback al usuario

   Indica cuándo los datos están cargando.

   usersOutput.textContent = "Cargando...";
   const data = await fetch(url).then(r => r.json());
   usersOutput.textContent = JSON.stringify(data);
   
4. Usa async/await para mejor legibilidad

   // ✅ Recomendado
   async function cargarDatos() {
     const response = await fetch(url);
     const data = await response.json();
     return data;
   }
   

APIs de Prueba

Para practicar, puedes usar estas APIs públicas:

JSONPlaceholder

API falsa para pruebas con usuarios, posts, comentarios, etc.

ReqRes

API REST de prueba con respuestas realistas

Random User

Genera usuarios aleatorios con fotos y datos completos

Open Weather

Datos del clima en tiempo real (requiere API key gratuita)

Próximos Pasos

Manejo de Respuestas

Aprende a procesar diferentes tipos de respuestas

Ejemplos de Fetch

Ve ejemplos completos de uso de Fetch