Hola Comunidad! Ojalá puedan ayudarme con un problema que estoy teniendo. Estoy usando la API de Giphy para algo muy simple, traer un GIF...

Julio César Zaravia Paredes

Pregunta

student•hace 5 años

Hola Comunidad! Ojalá puedan ayudarme con un problema que estoy teniendo. Estoy usando la API de Giphy para algo muy simple, traer un GIF aleatorio e imprimirlo en pantalla.

Todo bien con esto, hago click en el botón y en cada oportunidad el GIF cambia, sin embargo, luego de unos cuantos clicks, me salta un error ERR_NAME_NOT_RESOLVER.

Dejó mi código para ver si alguien le puede dar una ojeada y darme una opinión. Gracias!

PD. Adjunto también una URL de una captura del error https://ibb.co/BqBb462.

//CONSTANTES
const actionButton = document.getElementById('idBoton');
const gifBlock = document.getElementById('idGif');

const urlBase = 'https://api.giphy.com/v1/gifs/random?';
const apiKey = 'jiE49t43DUm54eOHtXFobiueTbZQrI2s';
const limit = 1;
const tag = 'puppies';

//ESCUCHAS
actionButton.addEventListener('click', () => {
    fetch(`${urlBase}api_key=${apiKey}&limit=${limit}&tag=${tag}`)
        .then(response => response.json())
        .then((data) => {
            console.log(data)
            const gifImage = data.data.images.downsized.url;
            showGif(gifImage);
        });
});

//FUNCIONES
function showGif(gifImage, offSet) {
    gifBlock.innerHTML = `
        <img src='${gifImage}'>
    `;
}

Juan Cumbe

student•hace 5 años

Pues es muy raro porque he ejecutado tu código y no me salta algún error:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <div id="cont" style="height: 200px; width: 200px;">
        <button id="idBoton">Click</button>
        <div id="idGif"></div>
    </div>

    <script>
        const actionButton = document.getElementById('idBoton');
        const gifBlock = document.getElementById('idGif');

        const urlBase = 'https://api.giphy.com/v1/gifs/random?';
        const apiKey = 'jiE49t43DUm54eOHtXFobiueTbZQrI2s';
        const limit = 1;
        const tag = 'puppies';

        //ESCUCHAS
        actionButton.addEventListener('click', () => {
            fetch(`${urlBase}api_key=${apiKey}&limit=${limit}&tag=${tag}`)
                .then(response => response.json())
                .then((data) => {
                    console.log(data)
                    const gifImage = data.data.images.downsized.url;
                    showGif(gifImage);
                });
        });

        //FUNCIONES
        function showGif(gifImage, offSet) {
            gifBlock.innerHTML = `<img src='${gifImage}'>`
        }
    </script>
</body>

</html>

Enrique Devars

teacher•hace 5 años

¡Hola! :D Creo que está mal el formato de cómo haces la URL en el fetch.

Hola Comunidad! Ojalá puedan ayudarme con un problema que estoy teniendo. Estoy usando la API de Giphy para algo muy simple, traer un GIF...

Curso de Asincronismo con JavaScript

Curso de Asincronismo con JavaScript