0Pricing
Frontend Academy · Lección

Fetch API: GET POST PUT DELETE

Realice solicitudes GET con fetch, envíe cuerpos JSON en solicitudes POST y PUT, y llame a endpoints DELETE para eliminar recursos.

Fetch API: GET POST PUT DELETE es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

La API Fetch

fetch() es la API moderna del navegador para realizar solicitudes HTTP. Devuelve una Promise que se resuelve en un objeto Response. Es estándar en todos los navegadores modernos y en Node.js 18 o versiones posteriores.

Solicitud GET básica

La solicitud fetch más sencilla: pase una URL, espere la respuesta y analice el JSON.

async function fetchUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) throw new Error('HTTP ' + res.status);
  const users = await res.json();
  return users;
}

POST con cuerpo JSON

Utilice method, headers y body. El cuerpo debe ser una cadena; llame a JSON.stringify() con el objeto.

async function createUser(user) {
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user)
  });
  if (!res.ok) throw new Error('Failed: ' + res.status);
  return res.json();
}

createUser({ name: 'Alice', email: 'alice@example.com' });

PUT para una actualización completa

PUT reemplaza el recurso. Envíe el objeto completo; los campos que omita normalmente se borran en el servidor.

await fetch(`/api/users/${id}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    id, name: 'Alice', email: 'alice@example.com', role: 'admin'
  })
});

PATCH para una actualización parcial

PATCH actualiza únicamente los campos que envía. Utilícelo para actualizaciones parciales en lugar de PUT.

await fetch(`/api/users/${id}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'new@example.com' })
});

Solicitud DELETE

DELETE normalmente no tiene cuerpo. La respuesta suele devolver 204 No Content sin cuerpo.

async function deleteUser(id) {
  const res = await fetch(`/api/users/${id}`, { method: 'DELETE' });
  if (!res.ok) throw new Error('Delete failed');
  // 204 No Content — no JSON to parse
}

Encabezados de autenticación

Añada un encabezado Authorization a los endpoints protegidos.

const res = await fetch('/api/me', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
});

Parámetros de consulta de URL

Construya las cadenas de consulta con URLSearchParams para codificarlas de forma segura.

const params = new URLSearchParams({
  q: 'react hooks',
  page: '2',
  pageSize: '20'
});

const res = await fetch(`/api/search?${params}`);
// /api/search?q=react+hooks&page=2&pageSize=20

Por qué fetch no genera errores para errores HTTP

fetch solo rechaza la Promise cuando se produce un error de red; una respuesta 404 o 500 se sigue resolviendo correctamente. Compruebe siempre res.ok (true para respuestas 2xx) o res.status, y genere el error manualmente.

const res = await fetch('/api/users/999');
if (!res.ok) {
  // res.ok is false for 4xx and 5xx
  throw new Error(`Server error ${res.status}: ${await res.text()}`);
}

AbortController para cancelar solicitudes

Cancele una solicitud en curso para evitar resultados obsoletos; es esencial en las búsquedas con sugerencias y en la limpieza de efectos de React.

const controller = new AbortController();

fetch('/api/search?q=hooks', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name !== 'AbortError') throw err;
  });

// Cancel:
controller.abort();

Envío de FormData

Para cargas de archivos o formularios multipart, pase un objeto FormData como cuerpo. No establezca Content-Type; el navegador lo añade con el boundary correcto.

const form = new FormData();
form.append('avatar', fileInput.files[0]);
form.append('name', 'Alice');

await fetch('/api/upload', { method: 'POST', body: form });
// no Content-Type header — browser sets multipart/form-data

Comprobación rápida

¿Por qué fetch() no genera un error cuando el servidor devuelve un 404 o un 500?

Resumen: API Fetch

fetch() devuelve una Promise de Response. Métodos: GET (predeterminado), POST, PUT, PATCH y DELETE. Los cuerpos JSON necesitan JSON.stringify() y el encabezado Content-Type. fetch solo rechaza la Promise cuando se produce un error de red; compruebe res.ok manualmente. Utilice URLSearchParams para las cadenas de consulta, AbortController para la cancelación y FormData para las cargas de archivos (no establezca Content-Type: el navegador se encarga de ello).

Preguntas frecuentes

¿La lección «Fetch API: GET POST PUT DELETE» es gratis?

Sí — el texto completo de «Fetch API: GET POST PUT DELETE» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Fetch API: GET POST PUT DELETE»?

Realice solicitudes GET con fetch, envíe cuerpos JSON en solicitudes POST y PUT, y llame a endpoints DELETE para eliminar recursos. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Fetch API: GET POST PUT DELETE»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Fetch API: GET POST PUT DELETE
  2. Axios: interceptores y URL base
  3. Manejo de errores: códigos de estado HTTP
  4. SWR y React Query para el almacenamiento en caché de datos
← Volver a Frontend Academy