JavaScript Asíncrono: La Guía Completa - Parte 3 - Entrenando Callbacks

En este artículo vamos a entrenar un poco más las funciones de callback. Implementaremos lo que fue prometido en el artículo anterior: la carga de los juegos relacionados en nuestra aplicación que ya está consumiendo una API de juegos. Puedes comprobar lo que ya hemos hecho en esta serie de artículos en estos enlaces:

Ahora que ya hemos hecho la solicitud de los juegos principales, es más fácil hacer la solicitud de los juegos relacionados. Primer paso: vamos a crear una nueva función en el archivo requests.js. Esta función se llamará getRelatedGamesByName(). Tendrá una funcionalidad muy similar a la ya creada getGameByName(). Los parámetros esperados serán los mismos, lo que cambiará será solo la URL de la API. Su código será este:

function getRelatedGamesByName(name, callback) {
    let request = new XMLHttpRequest();
    request.open('GET', `https://api.rawg.io/api/games/${name}/suggested`, true);
    request.onload = () => {
        let response = JSON.parse(request.response);
        if (typeof callback == 'function') callback(response);
    };
    request.send();
}

Ahora necesitamos llamar a esta función en nuestro archivo HTML. Será solicitada cuando hagamos clic en un juego de nuestra lista que ya estará renderizada. Entonces, podemos agregar un evento de clic para cada etiqueta

creada dentro del forEach() de la función initGames(). Después de crear la variable divGame, añadiremos este código:

divGame.addEventListener('click', e => {

    setGameLoad(gamesListRelationed);

    let gameTag = e.currentTarget;

    let gamename = gameTag.dataset.gamename;

    getRelatedGamesByName(gamename, function(gamesRelationed) {

        gamesListRelationed.innerHTML = '';

        gamesRelationed.results.forEach(game => {

            let divGameRelationed = setGameHTML(game);

            gamesListRelationed.append(divGameRelationed);

        });

    });

});

Explicando: hemos añadido un oyente del evento clic en cada elemento de juego creado. Con eso, al hacer clic en un juego, ejecutaremos una serie de acciones: 1) llamar a la función de “loading” en el elemento que contiene los juegos relacionados; 2) recuperar el nombre del juego en el que hicimos clic a través de la variable gamename; 3) llamar a la función getRelatedGamesByName() utilizando nuevamente el recurso de los callbacks, ya que informaremos una función anónima como segundo parámetro para esta función principal. Nuestro callback básicamente hará: 1) eliminar el contenido de la

que contendrá los nuevos juegos, garantizando que la información antigua, si la hay, no sobrescriba la nueva. Luego realizaremos un nuevo bucle de repetición en los resultados de la API mediante un forEach(), creando dentro de él el HTML de cada juego relacionado y añadiendo esos nuevos elementos a la div que contendrá los juegos relacionados.

Vamos a probar nuestra aplicación: actualizaremos la página y buscaremos algún juego. El resultado será este:

Sigue funcionando, tal como se probó en el artículo anterior. Ahora, vamos a hacer clic en algún juego de esta lista. El resultado es el siguiente:

Y ahora vemos los juegos relacionados con aquel en el que hicimos clic, provenientes nuevamente de la API, utilizando el concepto de funciones de callback una vez más. Sensacional, ¿no crees?

Solo un pequeño cambio. A partir de este momento, cuando llamemos a la función initGames(), antes de ejecutar la función getGameByName(), necesitaremos dejar vacío el contenido de la

de juegos relacionados, para evitar un conflicto de información al realizar la búsqueda de un nuevo juego. Así que, solo basta añadir la siguiente línea de código en la función initGames():

gamesListRelationed.innerHTML = '';

En este artículo practicamos un poco más sobre funciones de callback e implementamos una nueva funcionalidad a nuestro proyecto, eso es excelente

Puedes encontrar los códigos desarrollados en este artículo en este enlace: https://github.com/hcodebr/javascript-assincrono-blog

Las funciones de callback ayudan mucho, y todavía son muy usadas en la Web cuando se trata de solicitudes asíncronas. Sin embargo, JavaScript, en sus últimas versiones, nos trajo un nuevo recurso, que facilitó el uso del código asíncrono. Estamos hablando de las promises. Hablaremos con detalle sobre este recurso en el próximo artículo: JavaScript Asíncrono: La Guía Completa - Parte 4 - Usando Promises. No olvides compartir esta publicación si te gustó el contenido :)

¡Hasta el próximo artículo!

javascript

async

assicrono

Sigue aprendiendo con Hcode