Construir una función reutilizable para manejar peticiones HTTP es una de las mejores prácticas cuando trabajas con múltiples endpoints en JavaScript. Aquí se muestra paso a paso cómo crear esa estructura, consumir una API con fetch, iterar la respuesta e inyectar los datos directamente en el HTML usando manipulación del DOM.
¿Cómo crear una función reutilizable para peticiones HTTP?
Cuando una aplicación necesita realizar distintos tipos de peticiones — GET, POST, DELETE —, lo ideal es centralizar la lógica en una sola función. En este caso se crea sendHTTPRequest, que recibe tres parámetros [0:29]:
- Método: el verbo HTTP que se va a utilizar (GET, POST, etc.).
- URL: la dirección del recurso al que se hace la petición.
- Data: el cuerpo de datos que se envía, por ejemplo en un POST.
Dentro de la función se utiliza fetch pasándole la URL y un objeto de configuración con las propiedades method, body y headers [1:15].
javascript
function sendHTTPRequest(method, url, data) {
return fetch(url, {
method: method,
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
return response.json();
});
}
El body del request se transforma con JSON.stringify, que convierte un objeto de JavaScript a formato JSON para que el servidor pueda interpretarlo [1:25]. Los headers indican el tipo de contenido que se envía; en este caso application/json le dice al servidor que trate los datos como JSON [1:52].
Como fetch devuelve una promesa, se encadena un .then que retorna la respuesta ya parseada, lista para ser consumida por cualquier otra función [2:18].
¿Cómo consumir la API con async/await y mostrar la respuesta?
Para evitar bloquear la carga del navegador se utiliza una función async llamada fetchPost [3:05]. Dentro se declara una constante responseData que espera con await el resultado de sendHTTPRequest:
javascript
async function fetchPost() {
const responseData = await sendHTTPRequest(
'GET',
'https://jsonplaceholder.typicode.com/posts'
);
console.log(responseData);
}
Aunque fetch por defecto realiza un GET, al estar construyendo una función reutilizable conviene ser explícito con el método [3:28]. Al ejecutar esta función, en la pestaña Network del navegador se puede confirmar que el request devuelve un status 200 y el preview muestra el arreglo de objetos [4:15].
¿Por qué la pestaña Network es tan importante?
Cuando trabajas con requests a APIs, la pestaña Network de las herramientas de desarrollo es donde debes pasar la mayor parte del tiempo. Ahí se verifica si la petición fue exitosa, si el status code es correcto y qué estructura tiene la respuesta [4:30].
¿Cómo iterar la respuesta e inyectarla en el DOM?
La respuesta llega como un arreglo de objetos, cada uno con propiedades como id, title y body [5:05]. Para renderizar cada elemento se utiliza un ciclo for...of que itera sobre la lista de posts:
javascript
const listElement = document.querySelector('#post-list');
for (const post of listOfPosts) {
const postContainer = document.createElement('article');
postContainer.id = post.id;
postContainer.classList.add('post-card');
const title = document.createElement('h2');
title.textContent = post.title;
const body = document.createElement('p');
body.textContent = post.body;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Borrar contenido';
postContainer.append(title, body, deleteBtn);
listElement.append(postContainer);
}
Con createElement se generan los elementos HTML y con append se insertan dentro del contenedor principal [6:10]. Esto es manipulación del DOM: crear nodos, asignarles clases, IDs y contenido de texto para luego agregarlos al documento.
¿Cómo conectar el botón con la petición usando un evento?
El último paso es agregar un event listener al botón para que al hacer clic dispare la función fetchPost [7:30]:
javascript
const fetchButton = document.querySelector('#fetch-btn');
fetchButton.addEventListener('click', fetchPost);
Al dar clic en Get Content, se ejecuta el request GET, se recibe la respuesta del servidor y los posts se renderizan automáticamente en pantalla. Toda la lógica queda separada: una función genérica para peticiones HTTP y otra específica para obtener y mostrar los datos.
Si quieres practicar, intenta agregar la funcionalidad del botón de borrar usando la misma función sendHTTPRequest con el método DELETE y comparte cómo lo resolviste.
