Hoy en día casi todas las aplicaciones necesitan obtener datos desde un servidor: una lista de productos, usuarios, artículos de un blog o cualquier otro tipo de información. Para eso se utilizan las APIs REST.

Si trabajas con JavaScript, una de las formas más sencillas de consumir una API es la función fetch(), que viene integrada en el navegador.

En este tutorial aprenderás paso a paso cómo consumir una API y mostrar los datos en una página web.

Qué es una API REST

Una API REST es simplemente un servicio que permite enviar o recibir datos mediante peticiones HTTP. Por ejemplo:

  • GET → obtener datos
  • POST → crear datos
  • PUT → actualizar datos
  • DELETE → eliminar datos

Estas APIs normalmente devuelven la información en formato JSON.

Primer ejemplo usando fetch

Supongamos que tenemos una API que devuelve una lista de productos. Podemos hacer una petición GET usando fetch():

fetch('https://api.example.com/products')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

Este código hace lo siguiente:

  1. Envía una petición a la API.
  2. Convierte la respuesta a JSON.
  3. Muestra los datos en la consola.

Mostrar los datos en el HTML

Ahora vamos a mostrar los productos en la página. Primero creamos un contenedor en el HTML:

<ul id="product-list"></ul>

Ahora usamos JavaScript para insertar los productos:

fetch('https://api.example.com/products')
    .then(response => response.json())
    .then(products => {
        const list = document.getElementById('product-list');

        products.forEach(product => {
            const item = document.createElement('li');
            item.textContent = product.name + ' - ' + product.price;
            list.appendChild(item);
        });
    });

Con esto, cada producto aparecerá dentro de la lista.

Enviar datos a una API (POST)

También podemos enviar datos usando fetch(). Por ejemplo, para crear un producto:

fetch('https://api.example.com/products', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'Laptop', price: 1200 })
})
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

Aquí estamos enviando datos en formato JSON al servidor.

Conclusión

Consumir APIs con JavaScript es muy sencillo gracias a fetch(). Con solo unas pocas líneas de código puedes:

  • obtener datos desde un servidor,
  • mostrar información en la página,
  • enviar datos a una API.

Este tipo de integración es la base de muchas aplicaciones modernas.