¿Conoces el método para borrar contenido en frontend? Los eventos en JavaScript son elementos que nos permiten determinar una acción según un evento que sucede durante el periodo de ejecución de nuestros proyectos. Para determinar esta acción, deberemos insertar métodos o funciones en el segundo parámetro de una función addEventListener. En este post, te enseñaremos qué es y cómo crear el método para borrar contenido en frontend para que lo puedas añadir en los eventos de un elemento de interfaz.
¿Qué es el método para borrar contenido en frontend?
El método para borrar contenido en frontend es una función que hace una petición HTTP de tipo delete a la API en la que se encuentra un contenido determinado. Este método se usa con frecuencia en redes sociales, en las que un usuario (si sigue determinadas condiciones) puede borrar un contenido con un simple botón.
En este sentido, este post es como la secuela de nuestro post sobre crear un botón para borrar contenido en frontend, donde te enseñamos cómo crear el botón y otorgarle un evento con el comando .addEventListener. En este evento, hemos usado el siguiente método como reacción al clic del botón de borrado.
¿Cómo crear el método para borrar contenido en frontend?
Para crear el método para borrar contenido en frontend, primero debemos determinar qué pieza de nuestro código deberá ejecutar este método. Al ser una función que hace una petición de datos a la API de tu proyecto, te recomendamos manejarla dentro del modelo del patrón modelo vista controlador.
En nuestro caso, este modelo se llama contentService.js. Dentro de este archivo, declararemos un método llamado deleteContent, que recibe el id del contenido que el usuario quiere eliminar.
deleteContent (contentId) {
}
Dentro de este método, definiremos una URL que ataca a la API y al enlace con ID del contenido específico.
Ten presente que el método para borrar contenido en frontend no necesita devolver un contenido al controlador, pues con que se haya borrado bien nos sobra. Por ello, no hará falta declarar una variable content.
Una vez definida la URL de la API, haremos una petición fetch de tipo DELETE en este enlace. Luego, como las peticiones HTTP con fetch nos devuelven promesas, podremos controlar los escenarios de error y éxito de la petición usando las palabras clave try catch.
A continuación, te presentamos el método completo para borrar contenido en frontend:
async deleteContent (contentId) {
const url = ‘http://localhost:8000/api/contents/${content.id};
let response;
try {
response = await fetch (url, {
method: ‘DELETE’,
headers: {
‘Authorization’: ‘Bearer’ + signupService.getLoggedUser ( )
});
} catch (error) {
throw new Error (‘No he podido borrar el contenido’);
}
if (!response.ok) {
throw new Error (‘Contenido no encontrado’);
}
},
Ten presente que en las líneas de código anteriores hemos utilizado la cabecera authorization bearer para dar este permiso de petición al usuario. Una vez declarado este método dentro de nuestro modelo ContentService.js, debemos llamarlo desde nuestro controlador para que se ejecute cuando suceda el clic del botón de borrado.
¿Qué sigue?
Ahora que conoces el método para borrar contenido en frontend, ¡es momento de aplicarlo en tus propios proyectos web! Para seguir aprendiendo sobre la creación y desarrollo de este tipo de proyectos, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un espacio que combina la teoría con la práctica de manera ideal para que te abras paso en el mercado laboral IT en pocos meses. ¡No dudes en darle un impulso a tu carrera y solicita ahora más información!
