Métodos HTTP con Fetch: GET, POST, PUT y DELETE

Introducción a Métodos HTTP

Los métodos HTTP son la forma en que los clientes (como navegadores web) comunican sus intenciones a los servidores. Cada método tiene una semántica específica y un propósito bien definido en el protocolo HTTP. Cuando trabajas con APIs REST, es crucial usar el método correcto para cada operación, ya que esto afecta el comportamiento del servidor, el caching, la seguridad y la experiencia del usuario.

Fetch API te permite especificar el método HTTP a través del objeto de configuración que pasas como segundo argumento a la función fetch(). Por defecto, si no especificas un método, Fetch usa GET, que es el método más común para leer datos. Los otros métodos (POST, PUT, DELETE, PATCH, etc.) requieren que especifiques explícitamente el método y, en la mayoría de los casos, también el cuerpo de la solicitud.

• <strong>GET</strong>: Lee datos sin modificar el servidor (idempotente)
• <strong>POST</strong>: Crea nuevos recursos (no idempotente)
• <strong>PUT</strong>: Actualiza completamente un recurso (idempotente)
• <strong>DELETE</strong>: Elimina un recurso (idempotente)
• <strong>PATCH</strong>: Actualiza parcialmente un recurso (no idempotente)

Método GET

GET es el método HTTP más común y se usa para leer o recuperar datos de un servidor. Las peticiones GET no deberían modificar el estado del servidor y son idempotentes, lo que significa que puedes hacer la misma petición múltiples veces sin efectos secundarios. Por defecto, Fetch usa GET si no especificas un método, por lo que es el método más simple de usar.

Este ejemplo muestra la forma más simple de hacer una petición GET con Fetch. Solo pasas la URL y Fetch usa GET por defecto. La respuesta se lee como JSON usando .json(). GET es ideal para recuperar listas de recursos, detalles de un elemento específico, o cualquier operación de lectura que no modifique datos en el servidor.

Cuando necesitas pasar parámetros a una petición GET, los incluyes en la URL como query string. La clase URLSearchParams es una forma segura y conveniente de construir query strings, ya que maneja automáticamente el encoding de caracteres especiales. Esto es mucho mejor que concatenar strings manualmente, que puede causar errores de encoding y problemas de seguridad.

Método POST

POST se usa para crear nuevos recursos en el servidor. A diferencia de GET, POST tiene un cuerpo (body) que contiene los datos del nuevo recurso que deseas crear. POST no es idempotente, lo que significa que hacer la misma petición POST múltiples veces puede crear múltiples recursos duplicados. Por esta razón, POST es el método correcto para operaciones que modifican el estado del servidor de forma no predecible.

Este ejemplo muestra cómo crear un nuevo recurso usando POST. Especificamos el método como 'POST' en el objeto de configuración y proporcionamos el cuerpo de la solicitud usando la propiedad body. El cuerpo debe ser una string, por lo que convertimos el objeto JavaScript a JSON usandoJSON.stringify(). También es importante especificar el headerContent-Type como 'application/json' para que el servidor sepa cómo interpretar el cuerpo de la solicitud.

Cuando necesitas enviar archivos o datos de formulario, usa FormDataen lugar de JSON. FormData es una API del navegador que facilita el envío de datos multipart/form-data, que es el formato estándar para uploads de archivos. Con FormData, no necesitas especificar el header Content-Type manualmente, ya que el navegador lo hace automáticamente e incluye el boundary correcto para separar las partes del formulario.

Método PUT

PUT se usa para actualizar completamente un recurso existente en el servidor. A diferencia de PATCH, que actualiza solo los campos proporcionados, PUT reemplaza todo el recurso con los datos enviados. PUT es idempotente, lo que significa que puedes hacer la misma petición PUT múltiples veces sin efectos secundarios. Esto lo hace ideal para actualizaciones donde necesitas garantizar que el recurso tenga exactamente el estado que especificas.

Este ejemplo muestra cómo actualizar completamente un usuario usando PUT. Especificamos el ID del recurso en la URL y enviamos el objeto completo con todos los campos actualizados. PUT reemplaza todo el recurso, por lo que si omites un campo, ese campo se eliminará o se establecerá a su valor por defecto en el servidor. Esto es diferente de PATCH, que solo actualiza los campos proporcionados.

Una diferencia importante entre PUT y POST es que PUT es idempotente mientras que POST no lo es. En este ejemplo, verás cómo PUT puede usarse para crear o actualizar un recurso de forma idempotente. Si el recurso no existe, PUT lo crea; si ya existe, lo actualiza. Esto es útil cuando tienes un ID único generado por el cliente y quieres garantizar que solo exista un recurso con ese ID, sin importar cuántas veces hagas la petición. Por otro lado, PUT reemplaza todo el recurso, mientras que PATCH actualiza solo los campos proporcionados, lo cual es más eficiente para actualizaciones parciales.

Método DELETE

DELETE se usa para eliminar recursos del servidor. Como su nombre indica, este método solicita al servidor que elimine el recurso especificado en la URL. DELETE es idempotente, lo que significa que puedes hacer la misma petición DELETE múltiples veces sin efectos secundarios: la primera vez elimina el recurso, y las veces siguientes simplemente no hacen nada (o retornan un error 404 si el recurso ya no existe).

Este ejemplo muestra cómo eliminar un recurso usando DELETE. Especificamos el ID del recurso en la URL y usamos el método 'DELETE'. DELETE no requiere un cuerpo en la mayoría de los casos, ya que el recurso a eliminar se identifica por la URL. Es importante notar que DELETE puede retornar diferentes códigos de estado según la implementación del servidor: 200 OK con el recurso eliminado en el cuerpo, 202 Accepted si la eliminación es asíncrona, o 204 No Content si no hay cuerpo en la respuesta.

Cuando implementas eliminación en una aplicación real, es importante confirmar la acción con el usuario antes de proceder. Este ejemplo muestra cómo usarconfirm() para pedir confirmación antes de eliminar un recurso. También maneja el caso donde el recurso ya no existe (404), que es un escenario común en aplicaciones donde múltiples usuarios pueden eliminar el mismo recurso simultáneamente.

Otros Métodos HTTP

Además de GET, POST, PUT y DELETE, existen otros métodos HTTP que puedes usar con Fetch. Estos métodos son menos comunes pero tienen usos específicos en ciertos escenarios. PATCH es probablemente el más importante de estos, ya que es muy común en APIs REST modernas para actualizaciones parciales. HEAD y OPTIONS son útiles para metadatos y configuración CORS, respectivamente.

• <strong>PATCH</strong>: Actualiza parcialmente un recurso (solo campos enviados)
• <strong>HEAD</strong>: Igual que GET pero solo retorna headers (sin cuerpo)
• <strong>OPTIONS</strong>: Pregunta qué métodos y opciones están disponibles
• <strong>TRACE</strong>: Echo de la petición (raramente usado por seguridad)
• <strong>CONNECT</strong>: Establece un túnel TCP (usado para HTTPS proxies)

Errores Comunes

Al trabajar con diferentes métodos HTTP, hay varios errores comunes que los desarrolladores cometen. Uno de los errores más frecuentes es olvidar incluir el header Content-Type cuando envías JSON en el cuerpo de la solicitud. Sin este header, el servidor no sabe cómo interpretar el cuerpo y puede rechazar la petición o tratar los datos incorrectamente.

Este ejemplo muestra el error común de olvidar el header Content-Type. Aunque el código parece correcto, el servidor no sabrá que estás enviando JSON y podría intentar interpretar los datos como texto plano o form-data. Siempre incluye el header Content-Type apropiado cuando envías un cuerpo en la solicitud: 'application/json' para JSON, 'multipart/form-data' para FormData, 'application/x-www-form-urlencoded' para formularios URL-encoded, etc.

Otro error común es olvidar convertir el objeto JavaScript a string conJSON.stringify(). La propiedad body de Fetch espera una string, Buffer, o un objeto que implemente el método toString(). Si pasas un objeto JavaScript directamente, Fetch intentará convertirlo a string usando toString(), que producirá "[object Object]" en lugar del JSON esperado. Siempre usa JSON.stringify() para convertir objetos a JSON antes de enviarlos.