Enviar información a un servidor es una de las tareas más comunes en el desarrollo web. Comprender cómo construir una petición POST con fetch, prevenir comportamientos por defecto del formulario y leer los valores de los inputs permite crear funcionalidades reales como la publicación de contenido desde el navegador.
¿Cómo se estructura una función para crear un post con fetch? [01:00]
El primer paso es definir una función llamada createPost que reciba dos parámetros: título y contenido. Antes de armar el objeto que se enviará, conviene observar la estructura que la API espera. Al inspeccionar el response de los posts existentes, se identifica que cada registro necesita:
- Un
title.
- Un
body.
- Un
userId.
Para generar el userId de forma dinámica se utiliza Math.random, que produce un número aleatorio [01:52]. Con esos datos se construye el objeto post:
javascript
const userId = Math.random();
const post = {
title: title,
body: content,
userId: userId
};
Este objeto es el body de la petición, es decir, la información que viaja hacia el servidor.
¿Cómo se configura fetch para enviar un POST? [02:42]
La función se marca como async y dentro se invoca fetch indicando el método POST, la misma URL del ejercicio y el cuerpo con los datos:
javascript
async function createPost(title, content) {
const userId = Math.random();
const post = {
title: title,
body: content,
userId: userId
};
await fetch(url, {
method: 'POST',
body: JSON.stringify(post)
});
}
A diferencia de un GET, donde solo se solicita información, en un POST es obligatorio incluir un body porque se está enviando información al servidor.
¿Cómo capturar el evento submit y evitar que la página se recargue? [03:28]
Cuando un formulario tiene un botón con type="submit", al hacer clic el navegador recarga la página por defecto. Para impedirlo se usa preventDefault sobre el evento:
javascript
form.addEventListener('submit', (event) => {
event.preventDefault();
});
El método preventDefault cancela el comportamiento nativo del navegador [04:05]. Una vez aplicado, al pulsar el botón la página ya no se reinicia.
¿Cómo obtener los valores de los inputs del formulario? [04:22]
Dentro del mismo listener se accede a los campos del formulario mediante event.currentTarget.querySelector:
javascript
const title = event.currentTarget.querySelector('#title').value;
const content = event.currentTarget.querySelector('#content').value;
- currentTarget apunta al elemento que disparó el evento, en este caso el formulario.
- querySelector busca un elemento por su selector CSS, aquí los IDs
#title y #content.
- value extrae el texto que el usuario escribió.
Con un console.log(title, content) se verifica que los valores se capturan correctamente [05:25].
¿Cómo conectar el formulario con la función createPost? [05:52]
Solo queda invocar createPost dentro del listener, pasando las dos variables:
javascript
form.addEventListener('submit', (event) => {
event.preventDefault();
const title = event.currentTarget.querySelector('#title').value;
const content = event.currentTarget.querySelector('#content').value;
createPost(title, content);
});
¿Cómo verificar la petición en el navegador? [06:10]
Al abrir la pestaña Network de las herramientas de desarrollo y enviar el formulario, aparece una nueva entrada con las siguientes características:
- Método: POST.
- Código de estado: 201 (created), que confirma que el recurso se creó con éxito.
- En la sección Payload se observan el título, el body y el userId enviados.
- En Headers se confirma la URL de destino y el método utilizado.
Este flujo completo —construir el objeto, configurar fetch con método POST, prevenir el refresh y leer los inputs— es la base para cualquier formulario que necesite comunicarse con una API.
¿Tienes dudas sobre cómo manejar la respuesta del servidor o agregar validaciones al formulario? Comparte tu experiencia en los comentarios.
