POST y envío de datos
Envíe cargas JSON con opciones de solicitud.
POST y envío de datos es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 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 JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.
Enviar datos a un servidor
Para crear o actualizar datos, envíe una solicitud con un cuerpo. Fetch lo permite mediante el objeto de opciones que se pasa como segundo argumento.
Establecer el método
Establezca method en el verbo HTTP que necesite: POST para crear, PUT/PATCH para actualizar y DELETE para eliminar.
fetch(url, { method: "POST" });Añadir un cuerpo JSON
La mayoría de las API esperan JSON. Convierta el objeto en una cadena con JSON.stringify y colóquela en body.
fetch(url, {
method: "POST",
body: JSON.stringify({ name: "Ada", age: 36 })
});La cabecera Content-Type
Indique al servidor que el cuerpo es JSON estableciendo Content-Type: application/json. Sin esta cabecera, el servidor podría interpretar mal la carga útil.
fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Ada" })
});Leer la respuesta
Normalmente, el servidor responde con el recurso creado. Léalo del mismo modo que en una solicitud GET, mediante response.json().
const response = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
const created = await response.json();Una función completa de creación
Convierta el patrón en una función reutilizable. Esta acepta datos, los envía y devuelve la respuesta del servidor.
async function createUser(data) {
const res = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
return res.json();
}PUT y PATCH
Utilice PUT para reemplazar un recurso por completo y PATCH para actualizar solo algunos campos. Por lo tanto, la estructura del cuerpo es diferente.
fetch("/api/users/7", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ age: 37 })
});Envío de datos de formulario
Para cargar archivos o enviar formularios, utilice un objeto FormData como cuerpo. NO establezca Content-Type manualmente; el navegador añade el límite multipart correcto.
const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });Autenticación
Los endpoints protegidos necesitan credenciales. Envíe un token en la cabecera Authorization, junto con Content-Type.
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + token
},
body: JSON.stringify(data)
});Cookies y credenciales
De forma predeterminada, fetch no envía cookies entre distintos orígenes. Establezca credentials: "include" cuando el servidor utilice sesiones basadas en cookies.
fetch(url, { method: "POST", credentials: "include", body: payload });Problemas habituales con stringify
Recuerde que body debe ser una cadena (o FormData/Blob). Pasar un objeto sin procesar envía [object Object]. Aplique siempre JSON.stringify a los objetos primero.
body: JSON.stringify({ ok: true }) // correct
// body: { ok: true } <-- brokenComprobación rápida
Envío de JSON con POST.
Resumen
Envíe datos estableciendo method, un body y las cabeceras. Para JSON, aplique JSON.stringify al objeto y establezca Content-Type: application/json. Utilice FormData para las cargas (sin establecer Content-Type manualmente), añada Authorization para la autenticación y credentials: "include" para las cookies. Lea la respuesta con response.json().
Preguntas frecuentes
¿La lección «POST y envío de datos» es gratis?
Sí — el texto completo de «POST y envío de datos» 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 JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.
¿Qué aprenderé en «POST y envío de datos»?
Envíe cargas JSON con opciones de solicitud. Practicas JavaScript 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 JavaScript Academy?
No se requiere experiencia previa. JavaScript 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 2 de 4.
¿Cuánto tiempo toma la lección «POST y envío de datos»?
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 JavaScript Academy?
Sí. Cada lección de JavaScript 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
- Realización de solicitudes GET
- POST y envío de datos
- Gestión de errores y códigos de estado
- Cancelación de solicitudes con AbortController