Cuando trabajas con APIs REST en Angular, dominar el método POST es fundamental para crear nuevos recursos desde tu aplicación. Además, entender cómo estructurar correctamente la información que envías al servidor, diferenciándola de lo que recibes, marca la diferencia entre un código frágil y uno robusto. Aquí se explica paso a paso cómo implementar la creación de productos utilizando el HttpClient de Angular y el patrón de Data Transfer Object (DTO).
¿Cómo se implementa una petición POST en un servicio de Angular?
El punto de partida es el servicio de productos. Al crear un método llamado create, se utiliza this.http.post() en lugar de get [0:30]. Cada método del servicio debe incluir un return, ya que el componente necesita suscribirse al observable para obtener la respuesta.
typescript
create(dto: CreateProductDTO) {
return this.http.post<Product>(this.apiUrl, dto);
}
El método post recibe dos parámetros principales:
- La URL del endpoint, que en este caso es la misma que se usa para obtener productos.
- El body de la petición, que contiene la información del nuevo producto.
La URL es idéntica a la de getAll, pero el verbo HTTP cambia a POST [1:20]. El segundo parámetro corresponde al cuerpo de la petición, donde viaja toda la data que la API necesita para crear el recurso en la base de datos.
¿Qué es un Data Transfer Object y por qué es necesario?
Al intentar enviar un objeto de tipo Product para crear un nuevo producto, surgen conflictos de tipado [4:00]. Por ejemplo, no necesitas enviar un ID porque la base de datos lo genera automáticamente. Tampoco necesitas enviar la categoría como un objeto anidado; la API espera solo el categoryId como número.
El Data Transfer Object (DTO) es un patrón que define la estructura exacta de los datos que se transfieren hacia la API [4:30]. Puede coincidir con el modelo principal o diferir ligeramente. En este caso:
- Lo que envías: título, precio, descripción, imágenes y
categoryId como número.
- Lo que recibes: un producto completo con ID asignado y la categoría anidada como objeto.
¿Cómo crear un DTO reutilizando interfaces existentes?
En lugar de duplicar toda la interfaz, TypeScript ofrece la utilidad Omit para heredar de una interfaz excluyendo campos específicos [6:10].
typescript
export interface CreateProductDTO extends Omit<Product, 'id' | 'category'> {
categoryId: number;
}
Esto indica que CreateProductDTO tiene todos los campos de Product excepto id y category, y agrega categoryId como número. De esta forma el código no es repetitivo y mantiene consistencia con el modelo base.
¿Cómo se conecta el DTO con el componente?
En el componente de productos se crea un método createNewProduct que define el objeto con el tipado correcto [3:00].
typescript
createNewProduct() {
const product: CreateProductDTO = {
title: 'Nuevo producto',
price: 1000,
description: 'bla bla bla',
images: ['https://placeimg.com/640/480/any'],
categoryId: 2
};
this.productService.create(product).subscribe(data => {
this.products.unshift(data);
console.log('created', data);
});
}
Al tipar el objeto como CreateProductDTO, Visual Studio Code ofrece autocompletado y validación [3:20]. Si intentas agregar una propiedad que no pertenece a la interfaz, como coupon, el editor te alerta de inmediato. Ese feedback temprano evita errores antes de ejecutar la aplicación.
¿Cómo verificar que la petición POST funciona correctamente?
Desde el navegador, abriendo el inspector en la pestaña Network y filtrando por peticiones fetch, se puede observar cada solicitud al hacer clic en el botón "create" [8:30].
- El método aparece como POST.
- El payload muestra exactamente lo que se envió: título, precio, imagen, descripción y
categoryId.
- La respuesta devuelve el producto con un nuevo ID asignado por la base de datos y la categoría ya mapeada como objeto anidado [9:20].
Cada clic genera una nueva petición con un ID incremental diferente. Para reflejarlo en la interfaz, se usa unshift sobre el array de productos, insertando el nuevo elemento en la primera posición [9:00].
La flexibilidad del patrón DTO permite enviar datos en el formato que la API requiere y recibir la respuesta en el formato que resulta más práctico para renderizar en la aplicación. ¿Has implementado DTOs en tus proyectos o manejas el tipado de otra forma? Comparte tu experiencia.
