Cómo usar JavaScript fetch() [Guía para principiantes]
Lo básico sobre cómo obtener datos de una API usando comunicación asíncrona
🌤 Demostración en vivo
Obteniendo temperatura...
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mostrar la temperatura</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f0f0;
}
#weather {
font-size: 1.5rem;
color: #333;
}
</style>
</head>
<body>
<h1>Temperatura actual en Tokio</h1>
<p id="weather">Obteniendo la temperatura...</p>
<script>
async function getWeather() {
try {
const res = await fetch("https://api.open-meteo.com/v1/forecast?latitude=35.6895&longitude=139.6917¤t_weather=true");
const data = await res.json();
const temp = data.current_weather.temperature;
document.querySelector("#weather").textContent = `Temperatura en Tokio: ${temp}℃`;
} catch (e) {
document.querySelector("#weather").textContent = "🌧 Error al obtener los datos";
console.error("Error:", e);
}
}
getWeather();
</script>
</body>
</html>
🧩 Uso y solución de problemas con la función fetch
fetch() es una función moderna de JavaScript que permite manejar comunicaciones con APIs de forma sencilla. Como se mostró con la API del clima, puedes obtener datos de forma asíncrona desde una URL y mostrarlos en pantalla con solo unas pocas líneas de código.
Por ejemplo, se usa const res = await fetch(...) para realizar la solicitud, seguido de const data = await res.json() para convertir la respuesta en formato JSON. Esta secuencia es común en la mayoría de las integraciones con APIs.
🚨 Errores comunes y cómo evitarlos
Si la URL está mal escrita o hay problemas de red, puedes capturar los errores con un bloque try...catch y mostrar un mensaje como “Error al obtener los datos” al usuario para mejorar la experiencia.
En el caso de datos en tiempo real como el clima, es útil combinar fetch() con setInterval() para actualizar la información periódicamente.
Recuerda que algunas APIs requieren una clave de acceso. En ese caso, revisa la documentación oficial y agrega ?apikey=tu_clave al final de la URL si es necesario.