Peticiones HTTP en JavaScript: Fetch, GET, POST y DELETE

¿Cómo hacer peticiones HTTP escalables en JavaScript?

Las peticiones HTTP son fundamentales para la interacción con servidores y APIs, un proceso esencial en la creación de aplicaciones web. Implementar estas peticiones de manera eficiente puede marcar una gran diferencia en el rendimiento general de una aplicación. Aquí aprenderás a estructurar un código de JavaScript que permita realizar peticiones como GET, POST y DELETE de forma escalable.

¿Qué estructura necesita una función para realizar peticiones HTTP?

Para gestionar las peticiones HTTP de manera centralizada, utilizaremos la función sendHttpRequest. Esta función se encargará de recibir el método HTTP, la URL y el tipo de datos que se enviarán en la petición.

function sendHttpRequest(method, url, data) {
    return fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json());
}

¿Cómo utilizar fetchPost para obtener datos?

La función fetchPost es la encargada de hacer uso de sendHttpRequest para realizar una petición GET que recuperará posts de una URL específica.

async function fetchPost() {
    const responseData = await sendHttpRequest('GET', 'https://jsonplaceholder.typicode.com/posts');
    console.log(responseData);
}

¿Cómo imprimir y manipular datos en el DOM?

Una vez que se obtiene la respuesta del servidor, es crucial mostrar esos datos en la interfaz. Para ello, se utiliza la manipulación del DOM en JavaScript.

const listElement = document.getElementById('post-list');

function renderPosts(posts) {
    for (const post of posts) {
        const postElement = document.createElement('article');
        postElement.className = 'post';

        const postTitle = document.createElement('h2');
        postTitle.textContent = post.title;

        const postBody = document.createElement('p');
        postBody.textContent = post.body;

        postElement.appendChild(postTitle);
        postElement.appendChild(postBody);
        listElement.appendChild(postElement);
    }
}

// Llamar a fetchPost y renderizar los posts en el DOM.
fetchPost().then(responseData => {
    renderPosts(responseData);
});

¿Cómo interactuar con botones para cargar contenido?

Para completar la interacción, necesitamos garantizar que la función fetchPost se ejecute al hacer clic en un botón específico.

const fetchButton = document.getElementById('fetch-button');
fetchButton.addEventListener('click', fetchPost);

Por medio de este proceso, puedes cargar datos desde un servidor y mostrarlos directamente en tu aplicación, manteniendo tus peticiones HTTP organizadas y escalables. A través de la práctica continua, dominarás la manipulación del DOM, el uso del API Fetch y el manejo de promesas, habilidades esenciales para cualquier desarrollador web moderno. ¡Sigue avanzando y mejorando tus habilidades!