Problema: Consumir una API
El sitio:
https://dog.ceo/
tiene una API pública que nos permite recuperar la url de una foto de un perro al azar en cada petición.
La dirección que debemos acceder para recuperar un archivo JSON con dicha información es:
https://dog.ceo/api/breeds/image/random
Los datos que retorna tienen el siguiente formato:
Confeccionar una página que recupere y muestre la imagen de un perro distinto cada 5 segundos:
Solución
La lectura de la solución debería efectuarse luego de haber intentado resolverlo en forma individual.
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="contenedor">
<div class="marco">
<img id="imagen1" class="perro">
</div>
</div>
<script src="funciones.js"></script>
</body>
</html>
La hoja de estilo para mostrar la información.
estilos.css
* {
margin: 0;
padding: 0;
}
.contenedor {
height: 100vh;
display: flex;
background-color: white;
justify-content: center;
align-items: center;
}
.perro {
width: 600px;
}
.marco {
padding: 1rem;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px black;
}
Toda la funcionalidad se encuentra en el archivo JavaScript.
funciones.js
function recuperarImagen() {
fetch("https://dog.ceo/api/breeds/image/random")
.then(respuesta => respuesta.json())
.then(datos => {
document.querySelector("#imagen1").setAttribute("src", datos.message)
})
}
recuperarImagen()
setInterval(recuperarImagen, 5000)
Planteamos una única función llamada 'recuperarImagen' que se la llama inmediatamente se carga la página y luego se llamará cada 5 segundos:
recuperarImagen() setInterval(recuperarImagen, 5000)
La función 'recuperarImagen' procede a llamar a la función fetch y pasar la dirección que retorna el archivo JSON con la información:
fetch("https://dog.ceo/api/breeds/image/random")
Como la función fetch retorna una promesa, mediante la llamada al método then procedemos a recuperar la respuesta del servidor y convertimos los datos a un objeto json:
.then(respuesta => respuesta.json())
Finalmente con la promesa devuelta por el método then recibimos la información con formato json, donde procedemos a mostrar la imagen del perro en la etiqueta 'img', actualizando la propiedad 'src' con la URL del perro:
document.querySelector("#imagen1").setAttribute("src", datos.message)