Cuando desarrollas una app web, una de las habilidades más cool que puedes tener es usar Fetch API en JavaScript para conectarte con otras aplicaciones, obtener datos, y hacer tu contenido dinámico y vivo.
¿Qué es y para qué sirve la Fetch API en JavaScript?
Es una forma moderna de hacer peticiones HTTP (GET, POST, etc.) desde el navegador. Puedes pedir datos a una API (como una lista de pokémon, usuarios, posts, lo que sea) y luego usarlos en tu página web.
Cómo usar Fetch API en JavaScript con .then()
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
console.log(data); // Aquí recibes la lista de usuarios
})
.catch(error => {
console.error('Ocurrió un error bonito:', error);
});
Cómo mostrar los datos que trae Fetch API
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(users => {
const container = document.getElementById('user-list');
users.forEach(user => {
const div = document.createElement('div');
div.innerText = `🌸 ${user.name} (${user.email})`;
container.appendChild(div);
});
});Y en tu HTML:
<div id="user-list"></div>Cómo enviar datos usando Fetch API en JavaScript
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'Mi primer post bien bonito',
body: 'Esto es magia JS ✨',
userId: 1
})
})
.then(res => res.json())
.then(data => console.log(data));Recursos externos sobre Fetch API
- Documentación Fetch API – MDN
- Fake API para pruebas – JSONPlaceholder
- Curso completo de JavaScript moderno – OpenBootcamp
Conclusión
Aprender a usar Fetch API en JavaScript es como desbloquear una nueva habilidad en tu videojuego de programación. Ahora puedes hablar con APIs, traer info real y darle vida a tus proyectos. La próxima vez que veas un botón que dice «Cargar más», sabrás lo que hay detrás de escena… y tú podrás crear uno igual (¡o más tierno!). 😽
¿Quieres aprender más y llevar tus conocimientos al siguiente nivel?🎓
Si te emocionó este artículo y quieres comenzar YA a aprender más te invito a que explores todos los cursos disponibles en Platzi, una de las mejores plataformas de educación online en español. Hay rutas completas para desarrollo móvil, backend, frontend, ¡Y hasta diseño, inglés y marca personal!
👉 Haz clic aquí para entrar con mi link de referido y empieza tu camino pro como developer ¡Obtendrás 1 mes gratis adicional! 🎁 Además, cuando te unes desde ese link también me estarías ayudando a mi también a seguir adquiriendo conocimientos 💖 ¡Gracias mil por eso!
¡Sigue explorando y construye el futuro con tus propias manos! Si tienes alguna duda o proyecto en mente que quisieras compartir no dudes en contactarme ¡Estaré encantada y feliz de poder ayudarte!
