Hoy en día casi todas las aplicaciones necesitan obtener datos desde un servidor. Puede ser una lista de productos, usuarios, artículos de un blog o cualquier tipo de información.
Para eso se utilizan APIs REST.
Si trabajas con JavaScript, una de las formas más sencillas de consumir una API es usando 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 usando peticiones HTTP.
Por ejemplo:
GET → obtener datos
POST → crear datos
PUT → actualizar datos
DELETE → eliminar datos
Estas APIs normalmente devuelven 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().
<pre> <code>
fetch('https://api.example.com/products') .then(
response => response.json()) .then(data => {
console.log(data);
}) .catch(error => {
console.error('Error:', error);
}); </code> </pre>
Este código hace lo siguiente:
Envía una petición a la API
Convierte la respuesta a JSON
Muestra los datos en la consola
Mostrar 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.
<pre> <code>
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);
});
}); </code> </pre>
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.
<pre> <code>
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);
}); </code> </pre>
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.