Aprender a estructurar peticiones HTTP con fetch en JavaScript te permite reutilizar código, escalar tus llamadas a APIs y mostrar datos del servidor directamente en el DOM. Aquí verás cómo construir una función reutilizable para enviar requests, manejar la respuesta como promesa e inyectar resultados en HTML, ideal si estás dando tus primeros pasos con consumo de APIs.
Cómo crear una función reutilizable para peticiones HTTP
La idea es no repetir el mismo fetch cada vez que necesites un get, post o delete. En lugar de eso, defines una función que centralice la lógica.
Esta función, llamada sendHttpRequest, recibe tres parámetros: el método HTTP, la URL destino y la data que vas a enviar. Dentro retorna un fetch configurado con esos valores [01:00].
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();
});
}
¿Qué hace JSON.stringify dentro del body? Convierte un objeto de JavaScript en una cadena con formato JSON, que es el formato estándar para enviar datos al servidor.
El header Content-Type: application/json le indica al servidor cómo debe interpretar la información que llega. Sin ese header, el backend podría no procesar correctamente tu payload.
Por qué usar then con fetch
Como fetch devuelve una promesa, encadenas un .then() para transformar la respuesta cruda en JSON utilizable. Así, cuando llames a la función desde otra parte del código, ya recibes los datos listos para trabajar [02:30].
Cómo hacer un GET con fetch y async await
Una vez tienes la función base, puedes construir funciones específicas encima. Por ejemplo, una función fetchPosts que traiga todos los posts desde la API.
Aquí entra async/await, que te permite escribir código asíncrono con una sintaxis más legible y sin bloquear la carga del navegador.
javascript
async function fetchPosts() {
const responseData = await sendHttpRequest(
'GET',
'https://jsonplaceholder.typicode.com/posts'
);
const listOfPosts = responseData;
console.log(listOfPosts);
}
¿Qué hace await en una función async? Pausa la ejecución hasta que la promesa se resuelva, devolviendo el valor final sin bloquear el resto de la página.
Guardar la respuesta en una nueva constante como listOfPosts mantiene limpia la variable original y mejora la legibilidad cuando el código crece [05:00].
Dónde verificar que tu request funciona
La pestaña Network de las DevTools es donde pasarás la mayor parte del tiempo cuando trabajes con APIs. Ahí confirmas el estatus de la petición, revisas el preview de la respuesta y detectas errores.
Un estatus 200 significa que el servidor respondió correctamente. Si algo falla, esta vista te dice exactamente qué está pasando [06:30].
Cómo inyectar la respuesta del API en el HTML
La API devuelve un arreglo de objetos, y cada objeto representa un post con propiedades como id, title y body. Para mostrarlos en pantalla, necesitas iterar ese arreglo y crear elementos del DOM por cada item.
La estrategia es usar un bucle for...of que recorra cada post y construya dinámicamente una tarjeta HTML.
javascript
for (const post of listOfPosts) {
const postContainer = document.createElement('article');
postContainer.className = 'post-item';
const postTitle = document.createElement('h2');
postTitle.textContent = post.title;
const postBody = document.createElement('p');
postBody.textContent = post.body;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Borrar contenido';
postContainer.append(postTitle, postBody, deleteButton);
listElement.append(postContainer);
}
Cada elemento creado con createElement se ensambla dentro de un article, que actúa como contenedor tipo tarjeta. Después haces append al contenedor general que vive en tu HTML [08:00].
Cómo conectar el botón con la función fetch
Falta el último paso: que el botón dispare la petición cuando el usuario haga clic. Esto se logra con addEventListener.
javascript
fetchButton.addEventListener('click', fetchPosts);
Con esa línea, cada clic en Get Content ejecuta la función, trae los datos del servidor y los pinta en pantalla. Si dominas la manipulación del DOM, este paso te resultará familiar; si no, vale la pena reforzar ese tema antes de seguir avanzando.
¿Has intentado escalar tus peticiones con una función reutilizable como esta? Cuéntame en los comentarios qué APIs estás consumiendo en tus proyectos.
