fetch II: POST, headers y el cuerpo

GET pide; POST envía. Registrar un gasto, crear una cuenta, mandar un comentario: todo lo que nace en tu app y debe quedar en un servidor viaja en una petición con método, cabeceras y cuerpo. Hoy armas ese paquete completo — y de paso entiendes esas "headers" que llevas viendo en DevTools desde el supercurso de maquetación.

El paquete con formulario de envío

Las tres piezas del segundo argumento de fetch: method (sin él, GET), headers (un objeto de cabeceras — casi siempre empezarás solo con Content-Type) y body — que NO acepta objetos: por el cable viaja texto, y JSON.stringify (tu empacadora al vacío del módulo 5) convierte el objeto en ese texto. El servidor responde 201 Created y te devuelve el recurso con su id nuevo: así confirmas qué quedó guardado.

Nota honesta doble: JSONPlaceholder RESPONDE como si guardara, pero no persiste nada (es un simulador público — tu Taxi no queda en ningún lado; la mecánica es la real). Y en APIs de verdad casi siempre agregarás una cabecera más: Authorization, con tu llave de acceso — la conocerás a fondo cuando construyas backends con auth en los supercursos de servidor.

La familia completa de verbos

// leer (el de la lección pasada)
fetch("/gastos/7");                              // GET

// crear uno nuevo
fetch("/gastos", { method: "POST", ... });       // POST

// actualizar uno existente (PATCH: solo los campos que cambian)
fetch("/gastos/7", { method: "PATCH", ... });    // PATCH (o PUT: completo)

// eliminar
fetch("/gastos/7", { method: "DELETE" });        // DELETE

¿Te suena el patrón? Es el CRUD del módulo 4 (crear, leer, actualizar, borrar), ahora sobre HTTP: cada operación tiene su verbo y las URLs nombran recursos. Esa convención se llama REST y la respirarás en los supercursos de backend — por ahora te basta con reconocer el mapa: GET lee, POST crea, PATCH/PUT actualizan, DELETE borra. Todos se escriben igual que tu POST: cambia el method y (a veces) el body.

Mini-reto

Practica el paquete completo: 1) registra un gasto tuyo (objeto con nombre, valor y categoría) vía POST e imprime el status y el id que te asignaron; 2) envíale un PATCH a https://jsonplaceholder.typicode.com/posts/1 con body: JSON.stringify({ title: "actualizado" }) (y su Content-Type) y mira qué devuelve; 3) remata con un DELETE al mismo recurso — sin body — e imprime el status. Acabas de hablar los cuatro verbos de HTTP.

Qué sigue

Ya pides y envías… en el mundo ideal donde todo responde bien. La próxima lección es el mundo real: la trampa famosa de fetch con los errores HTTP (spoiler: un 404 NO rechaza la promesa), los estados de carga que todo usuario merece ver, y la cancelación de peticiones con tu viejo conocido AbortController.