📌 Introducción a Fetch en JavaScript

fetch() es una función integrada en JavaScript que permite realizar solicitudes HTTP. Es una alternativa moderna a XMLHttpRequest, ofreciendo una sintaxis más limpia y basada en Promesas.

✅ Ventajas de fetch()

• Sintaxis sencilla y moderna 🦾
• Soporte para Promesas y async/await ⏳
• Facilidad para manejar JSON y otros formatos de respuesta 💡

🛠️ Consumiendo una API REST con Fetch

Supongamos que queremos obtener información de una API de películas. Lo haremos paso a paso.

1️⃣ Realizar una solicitud GET

fetch('https://api.ejemplo.com/peliculas')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error al obtener datos:', error));

Aquí: - fetch(url) solicita datos a la API. - response.json() convierte la respuesta en un objeto JSON. - console.log(data) muestra los datos en la consola.

2️⃣ Uso de async/await para mayor claridad

async function obtenerPeliculas() {
  try {
    const response = await fetch('https://api.ejemplo.com/peliculas');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error al obtener datos:', error);
  }
}

obtenerPeliculas();

✅ Ventaja: Código más legible y mejor manejo de errores.

🔍 1. Optimiza el tiempo de carga

• Usa caching para evitar múltiples solicitudes a la misma API.
• Implementa localStorage o sessionStorage cuando sea útil.

💡 2. Usa datos estructurados (JSON-LD)

Si tu API proporciona datos de productos, usa JSON-LD:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Movie",
  "name": "Inception",
  "director": "Christopher Nolan",
  "datePublished": "2010-07-16"
}
</script>

📱 3. Mejora la accesibilidad

• Utiliza Lazy Loading para imágenes y datos pesados.
• Ofrece una alternativa en caso de que la API falle (mensajes de error claros).

🏆 Conclusión

Consumir APIs REST en JavaScript con fetch() es una práctica esencial para aplicaciones modernas. Aplicando async/await, caching y datos estructurados, te aseguras de que tu contenido sea rápido y accesible.

¿Listo para integrar estos conceptos en tu próximo proyecto? 🚀💻 ¡Cuéntame qué necesitas mejorar o implementar!