Skip to main content

​
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: '[email protected]'
};

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:
El método HTTP a usar.
fetch(url, {
  method: 'POST' // 'GET', 'POST', 'PUT', 'DELETE', 'PATCH', etc.
})
Cabeceras HTTP para enviar con la petición.
fetch(url, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123',
    'Accept': 'application/json'
  }
})
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.
Si incluir cookies en la petición.
fetch(url, {
  credentials: 'include' // 'omit', 'same-origin', 'include'
})
El modo CORS de la petición.
fetch(url, {
  mode: 'cors' // 'cors', 'no-cors', 'same-origin'
})

​
Otros Métodos HTTP

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: '[email protected]'
  })
});

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us