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: 'juan@example.com'
};

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
PATCH
DELETE

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: 'juan.nuevo@example.com'
  })
});

Actualizar parcialmente un recurso.

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

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

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}`);
}

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);
}

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);

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

Introducción

Fundamentos

JavaScript Asíncrono

HTTP y Almacenamiento

Ejemplos Prácticos

Fetch API

Fetch API

¿Qué es Fetch?

Sintaxis Básica

Con Promises (.then)

Con Async/Await

Hacer una Petición GET

GET con Parámetros

Hacer Peticiones POST

Opciones de Fetch

Otros Métodos HTTP

Ejemplo Completo del Proyecto

Buenas Prácticas

APIs de Prueba

JSONPlaceholder

ReqRes

Random User

Open Weather

Próximos Pasos

Manejo de Respuestas

Ejemplos de Fetch

Build docs developers (and LLMs) love

Introducción

Fundamentos

JavaScript Asíncrono

HTTP y Almacenamiento

Ejemplos Prácticos

Documentation Index

​Fetch API

​¿Qué es Fetch?

​Sintaxis Básica

​Con Promises (.then)

​Con Async/Await

​Hacer una Petición GET

​GET con Parámetros

​Hacer Peticiones POST

​Opciones de Fetch

​Otros Métodos HTTP

​Ejemplo Completo del Proyecto

​Buenas Prácticas

​APIs de Prueba

JSONPlaceholder

ReqRes

Random User

Open Weather

​Próximos Pasos

Manejo de Respuestas

Ejemplos de Fetch

Build docs developers (and LLMs) love

Fetch API

¿Qué es Fetch?

Sintaxis Básica

Con Promises (.then)

Con Async/Await

Hacer una Petición GET

GET con Parámetros

Hacer Peticiones POST

Opciones de Fetch

Otros Métodos HTTP

Ejemplo Completo del Proyecto

Buenas Prácticas

APIs de Prueba

Próximos Pasos