Cómo implementar DELETE en un repositorio

Contenido del curso

Fundamentos HTTP

APIs y REST para consumidores

Setup y Arquitectura Base

Métodos HTTP en práctica con FakeStoreAPI

Optimización y próximos pasos

17
APIs REST con JavaScript dominadas
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:01

Cómo implementar DELETE en un repositorio

Curso de API REST con Javascript

Clase 16 de 17

Clase 16 / 17

Recursos

Eliminar un producto con el método DELETE en la API Fake Store de Platzi es una de las operaciones más simples del CRUD: solo necesitas el ID del producto y obtienes una respuesta booleana que indica si la eliminación fue exitosa o no. Esta guía te muestra cómo integrarlo en tu repositorio y conectarlo con la vista de detalle.

¿Qué necesita el endpoint DELETE de la API Fake Store?

La especificación es directa: usas el verbo HTTP delete y agregas el ID del producto en la URL. No hay query parameters adicionales ni body que enviar.

Verbo HTTP: delete.
Parámetro requerido: el product ID en la URL.
Respuesta: true o false según el resultado.

¿Qué retorna un endpoint DELETE en la API Fake Store? Retorna una respuesta vacía, pero el status HTTP indica si la operación fue exitosa. Por eso basta con leer response.ok para saber si el producto se eliminó.

¿Cómo implementar deleteProduct en el repositorio?

En el repositorio de productos creas un método asíncrono que recibe el product ID y llama al endpoint con fetch. La lógica es muy parecida a la del edit, pero sin body [01:00].

Los pasos clave dentro del método:

Declarar async deleteProduct(productId).
Construir la URL con el ID del producto.
Llamar a fetch usando el método delete sin enviar body.
Retornar response.ok para exponer un booleano al consumidor.

Al hacer return response.ok, el repositorio entrega directamente el resultado lógico de la operación. No necesitas parsear JSON ni manipular el body, porque la API responde vacío y la única información útil está en el estatus.

¿Por qué un DELETE no lleva body? Porque el verbo delete solo necesita identificar el recurso a eliminar mediante la URL. Enviar un body sería redundante y muchas APIs lo ignoran.

¿Cómo conectar la eliminación con la vista de detalle?

La vista de detalle ya tiene un botón Eliminar producto que abre un modal con las opciones de confirmar o cancelar. Al confirmar, se dispara la función deleteProduct que maneja toda la lógica de UI [02:10].

¿Qué lógica debes mantener en la función deleteProduct?

El flujo original incluía una simulación con timeout que vas a reemplazar por la llamada real al repositorio, pero conservas el comportamiento visual:

Validar que exista el product ID.
Mostrar un spinner mientras se procesa la eliminación.
Si fue eliminado: ocultar el modal, mostrar mensaje de éxito y redirigir al home.
Si falló: mostrar mensaje de error y restaurar el botón de Eliminar.

¿Cómo integrar el repositorio dentro de la vista?

Dentro de la función accedes al repositorio con window.productRepository y llamas a repository.deleteProduct(productId). La promesa retorna un booleano que puedes nombrar wasDeleted para reutilizar la lógica existente sin cambios mayores.

javascript window.productRepository .deleteProduct(productId) .then((wasDeleted) => { hideDeleteModal(); if (wasDeleted) { // mostrar mensaje de éxito y redirigir al home } else { // mostrar error y restaurar el botón de Eliminar } });

La clave está en mover la decisión desde el timeout simulado hacia el then de la promesa real. Así, el comportamiento de UI se mantiene idéntico, pero ahora respaldado por la API.

¿Cómo verificar que la eliminación funciona correctamente?

Para probarlo, levanta el servidor, recarga la página y coloca un breakpoint dentro de deleteProduct. Al confirmar la eliminación en el modal, el debugger se detendrá en la invocación al repositorio [04:20].

En la pestaña Network del navegador podrás observar tres detalles importantes:

La solicitud sale con el método delete hacia el producto, por ejemplo el de ID nueve.
El cuerpo de la respuesta llega vacío.
El response.ok es true, lo que confirma que la API procesó la eliminación.

Después del next en el debugger, verás cómo se oculta el modal, aparece el mensaje de éxito y el usuario es redirigido al home. Ese es exactamente el comportamiento que ya existía, ahora conectado con la API real.

El delete es de los verbos más sencillos de implementar porque solo tiene dos resultados posibles: eliminado o no eliminado. Si tuviste algún problema implementando el método en el repositorio o integrándolo con el template de detalle, déjame tu duda en los comentarios.

Fundamentos HTTP

Cómo JavaScript habla con una API

Cómo funciona el protocolo HTTP entre JavaScript y APIs

Qué significan los códigos de estado HTTP

Headers HTTP: qué son y cómo funcionan

Peticiones HTTP reales en el navegador

APIs y REST para consumidores

Como APIs usam HTTP para conectar apps

Qué es REST y cómo organiza las APIs web

Documentación de API REST con editor de texto

Setup y Arquitectura Base

Configuración de template de tienda virtual para consumir API REST

Peticiones HTTP con Fetch en JavaScript

Patrón repositorio para centralizar fetch

Métodos HTTP en práctica con FakeStoreAPI

Integración de productos y detalle con fetch

Filtrar productos por categoría con URLSearchParams

Crear productos con fetch y POST

Edición de productos con verbo PUT en JavaScript

Cómo implementar DELETE en un repositorio

Optimización y próximos pasos

APIs REST con JavaScript dominadas

Cómo implementar DELETE en un repositorio

Progreso del curso

Fundamentos HTTP

APIs y REST para consumidores

Setup y Arquitectura Base

Métodos HTTP en práctica con FakeStoreAPI

Optimización y próximos pasos

Recursos

Recursos