📡 Consumo de APIs desde el Frontend

📡 Consumo de APIs desde el Frontend

El Frontend se comunica con el Backend de Laravel mediante peticiones HTTP a las rutas definidas en tu API. Esto permite crear interfaces dinámicas que muestran datos en tiempo real, enviando o recibiendo información en formato JSON.

🌐 Comunicación con el backend

Las peticiones hacia la API se realizan comúnmente desde JavaScript utilizando funciones como fetch() o librerías como Axios. Laravel devuelve respuestas JSON desde los controladores API, que luego son procesadas en el frontend.

💡 Ejemplo con Fetch API

// Obtener lista de usuarios desde la API Laravel
fetch('https://tu-dominio.com/api/users')
  .then(response => response.json())
  .then(data => {
    console.log("Usuarios recibidos:", data);
    const lista = document.getElementById('usuarios');
    lista.innerHTML = data.data.map(u => `
${u.nombre} (${u.email})
`).join('');
  })
  .catch(error => console.error('Error al obtener usuarios:', error));

Con este código, puedes visualizar la lista de usuarios directamente en tu frontend.

⚙️ Ejemplo con Axios

// Usando Axios para consumir una API
axios.get('https://tu-dominio.com/api/products')
  .then(response => {
    console.log("Productos:", response.data);
  })
  .catch(error => {
    console.error("Error al cargar productos:", error);
  });

Axios simplifica la sintaxis, permite manejar cabeceras de autenticación fácilmente y trabaja bien con tokens Bearer.

🔐 Envío de datos con autenticación

axios.post('https://tu-dominio.com/api/posts', 
  { titulo: 'Nuevo post', contenido: 'Texto del artículo' }, 
  { headers: { 'Authorization': 'Bearer ' + token } }
).then(res => {
  console.log("Post creado:", res.data);
});

Si tu API usa autenticación mediante tokens (como Laravel Sanctum o Passport), solo necesitas incluir el header Authorization con el token correspondiente.

📦 Ejemplo práctico en HTML + JS

  
Consultar datos desde API Laravel
  
  

🧠 Buenas prácticas

• Usar try/catch o .catch() para manejar errores.
• Separar las peticiones API en un archivo JS dedicado (por ejemplo, api.js).
• Evitar exponer tokens o credenciales en el frontend.
• Utilizar HTTPS para proteger la comunicación.

📄 Resumen

Consumir una API desde el frontend te permite construir interfaces interactivas con datos reales. Laravel facilita este proceso mediante respuestas JSON limpias y estructuradas que pueden integrarse con cualquier framework frontend (Vue, React, Angular o incluso JavaScript puro).

🏠 Volver al Índice ➡️ Siguiente tema: 🧪 Testing básico en Laravel