Función reutilizable para peticiones fetch

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:25

Función reutilizable para peticiones fetch

Curso de Fundamentos de JavaScript

Clase 51 de 55

Clase 51 / 55

Recursos

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.

Aloy Foxy

Hace 2 años

Comparto el código HTML y JS para tu comodidad, el CSS es a mi estilo.

HTML:

<style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f5f5f5;
        }

        section {
            width: 80%;
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .form-control {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }

        input, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        .posts {
            margin-top: 15px;
        }
    </style>

    <section id="new-post">
        <form>
            <div class="form-control">
                <label for="title">Title</label>
                <input type="text" id="title">
            </div>
            <div class="form-control">
                <label for="content">Content</label>
                <textarea rows="3" id="content"></textarea>
            </div>
            <button type="submit">POST Content</button>
        </form>
    </section>

    <section id="available-posts">
        <button>GET Content</button>
        <section id="posts-container" class="posts"></section>
    </section>
```\<style>        body {            font-family: Arial, sans-serif;            display: flex;            flex-direction: column;            align-items: center;            background-color: #f5f5f5;        }
&#x20;       section {            width: 80%;            max-width: 600px;            margin: 20px auto;            padding: 20px;            background: white;            border-radius: 8px;            box-shadow: 0 2px 4px rgba(0,0,0,0.1);        }
&#x20;       .form-control {            margin-bottom: 15px;        }
&#x20;       label {            display: block;            margin-bottom: 5px;            font-weight: bold;            color: #333;        }
&#x20;       input, textarea {            width: 100%;            padding: 8px;            border: 1px solid #ddd;            border-radius: 4px;            font-size: 14px;        }
&#x20;       button {            background-color: #4CAF50;            color: white;            padding: 10px 20px;            border: none;            border-radius: 4px;            cursor: pointer;            font-size: 16px;            transition: background-color 0.3s;        }
&#x20;       button:hover {            background-color: #45a049;        }
&#x20;       .posts {            margin-top: 15px;        }    \</style>
&#x20;   \<section id="new-post">        \<form>            \<div class="form-control">                \<label for="title">Title\</label>                \<input type="text" id="title">            \</div>            \<div class="form-control">                \<label for="content">Content\</label>                \<textarea rows="3" id="content">\</textarea>            \</div>            \<button type="submit">POST Content\</button>        \</form>    \</section>
&#x20;   \<section id="available-posts">        \<button>GET Content\</button>        \<section id="posts-container" class="posts">\</section>    \</section>

JS:

```js
const listElement = document.querySelector('.posts')
const postTemplate = document.querySelector('.single-post')
const form = document.querySelector('#new-post form')
const fetchButton = document.querySelector('#available-posts button')
const postList = document.querySelector('#posts-container')


for (const post of listOfPosts) {
        const postContainer = document.createElement('article')
        postContainer.id = post.id
        postContainer.classList.add('post-item')

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

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

        const button = document.createElement('button')
        button.textContent = 'DELETE Content'

        postContainer.append(title)
        postContainer.append(body)
        postContainer.append(button)

        listElement.append(postContainer)
    }
```for (*const* post of listOfPosts) {        *const* postContainer = document.createElement('article')        postContainer.id = post.id        postContainer.classList.add('post-item')
&#x20;       *const* title = document.createElement('h2')        title.textContent = post.title
&#x20;       *const* body = document.createElement('p')        body.textContent = post.body
&#x20;       *const* button = document.createElement('button')        button.textContent = 'DELETE Content'
&#x20;       postContainer.append(title)        postContainer.append(body)        postContainer.append(button)
&#x20;       listElement.append(postContainer)    }

Comentarios (34)34 comentarios

Nahuel Caero

Jesus Eduardo Castillo Saavedra

Facundo Peralta

Dario Mendoza

Javier Sanjuanelo

Juan Sifuentes

Luis Felipe Medina Álvarez

rodrigo Felipe Jara Duarte

Hace un año

Juan Miguel Jimenez

Hace 10 meses

Andrés Ortega

Johan Alejandro Chaves Alvarado

Carlos Rey

Allan Hernandez

Stiven Alvarez

Manuel Alberto Sotelo Rivas

Agustina Corvo

Eduardo Enrique Morales Martínez

pedro albenis parrado vargas

cristian diez

Juliana Rios

Jhonatan Fabian Gamboa Bonilla

JOSE ZELADA

Hace 6 meses

Kamilo Stevan Alomías Correa

Hace 5 meses

Hernán García Urrutia

Hace 2 meses•editado

HERNANDO RAMIREZ

Oliver Fabian Avila Tamayo

David Limon

Any Omaña

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Función reutilizable para peticiones fetch