JavaScript Assíncrono: O Guia Completo - Parte 3 - Treinando Callbacks

Neste artigo iremos treinar um pouco mais as funções de callback. Iremos implementar o que foi prometido no artigo anterior: o carregamento dos jogos relacionados na nossa aplicação que já está consumindo uma API de jogos. Você pode conferir o que já fizemos nessa série de artigos nestes links:

1. JavaScript Assíncrono: O Guia Completo - Parte 1 - O que é um código assíncrono?
2. JavaScript Assíncrono: O Guia Completo - Parte 2 - Callbacks

Agora que já fizemos a requisição dos jogos principais, fica mais fácil fazer a requisição dos jogos relacionados. Primeiro passo: vamos criar uma nova função no arquivo requests.js. Essa função se chamará getRelatedGamesByName(). Ela terá uma funcionalidade muito similar à já criada getGameByName(). Os parâmetros esperados serão os mesmos, o que mudará será apenas a URL da API. Seu 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();
}

Precisamos agora chamar essa função em nosso arquivo HTML. Ela será requisitada quando clicarmos em um jogo da nossa lista que já estará renderizada. Então, podemos adicionar um evento de clique para cada tag <div> criada dentro do forEach() da função initGames(). Após criarmos a variável divGame, iremos adicionar 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: adicionamos um ouvinte do evento clique em cada elemento de jogo criado. Com isso, ao clicar em um jogo iremos executar uma série de ações: 1) chamar a função de “loading” no elemento que contém os jogos relacionados; 2) recuperar o nome do jogo que clicamos através da variável gamename; 3) chamar a função getRelatedGamesByName() usando novamente o recurso dos callbacks, pois iremos informar uma função anônima como segundo parâmetro para essa função principal. O nosso callback basicamente irá: 1) remover o conteúdo da <div> que vai conter os novos jogos, garantindo que as informações antigas, se houver, não irão sobrescrever as novas. Depois realizaremos um novo laço de repetição nos resultados da API por meio de um forEach(), criando dentro dele o HTML de cada jogo relacionado e adicionando esses novos elementos à div que conterá os jogos relacionados.

Vamos testar nossa aplicação: vamos atualizar a página e procurar por algum jogo. O resultado será esse:

Continua funcionando, assim como foi testado no artigo anterior. Agora, vamos clicar em algum jogo dessa lista. O resultado é o abaixo:

E agora vemos os jogos relacionados àquele que nós clicamos, vindos novamente da API, usando o conceito das funções de callback mais uma vez. Sensacional, não concorda?

Apenas uma pequena mudança. A partir desse momento, quando chamarmos a função initGames(), antes de executar a função getGameByName(), precisaremos deixar o conteúdo da <div> de jogos relacionados vazio, para não haver um conflito de informações quando realizarmos a busca de um novo jogo. Assim, basta adicionar a seguinte linha de código na função initGames():

gamesListRelationed.innerHTML = '';

Neste artigo praticamos um pouco mais de funções de callback e implementamos uma nova funcionalidade ao nosso projeto, isso é excelente

Você pode encontrar os códigos desenvolvidos nesse artigo neste link: https://github.com/hcodebr/javascript-assincrono-blog

As funções de callback ajudam demais, e ainda são muito usadas na Web quando o assunto é requisições assíncronas. Contudo, o JavaScript, em suas últimas versões, nos trouxe um novo recurso, que facilitou o uso do código assíncrono. Estamos falando das promises. Iremos falar com detalhes sobre esse recurso no próximo artigo: JavaScript Assíncrono: O Guia Completo - Parte 4 - Usando Promises. Não esqueça de compartilhar essa postagem se você gostou do conteúdo :)

Até o próximo artigo!