Neste artigo iremos falar sobre as funções de callback e como elas ajudaram no desenvolvimento do JavaScript Assíncrono. Você pode conferir o conteúdo da parte 1 desta série neste link:
JavaScript Assíncrono: O Guia Completo - Parte 1 - O que é um código assíncrono?
O que são callbacks
Uma função de callback é basicamente uma função executada após outra. Para que essa função seja executada, geralmente a informamos como parâmetro de uma função inicial. Para entendermos melhor esse conceito, pense no seguinte exemplo: quando você era criança, já recebeu alguma tarefa da sua mãe? Talvez você se lembre de ter recebido uma lista de tarefas. Exemplo: “lave a louça, varra a sala e organize seu quarto.” Você fez tudo isso. Mas, no final do dia, ela te diz: “Esqueci de mais uma coisa: leve o lixo pra fora.” Percebeu? Você fez várias tarefas, mas por fim ela te passou mais uma para fazer. Uma função de callback funciona da mesma maneira. Nós executamos uma função, que irá realizar várias ações. Mas informamos também uma função no parâmetro, como que dizendo: “depois de executar tudo que eu já defini, realize mais essa tarefa que está nos parâmetros.”
Mas, por que deveríamos usar uma função de callback? Em alguns casos, nós só queremos executar uma ação depois que algo já ocorreu na página. Exemplo: imagine que desejamos renderizar uma lista de cidades em uma tabela. Contudo, as informações das cidades estão vindo de uma API. Então, quando iremos realizar a renderização? Apenas quando tivermos os dados de fato, não é mesmo? Nesse caso, poderíamos criar uma função de renderização que seria o callback da função principal, que seria a responsável por trazer os dados.
Dois exemplos clássicos de funções de callback são as funções setTimeout() e setInterval(), que são nativas do JavaScript. Ambas esperam uma função de retorno. Mas, o que acha de criarmos juntos uma função de callback? Veja o código abaixo:
function writeHello(callback) {
console.log('Hello World');
if (typeof callback == 'function') callback();
}
Nós criamos uma função chamada writeHello() que irá exibir “Hello World” no console. Mas, além disso, esperamos como parâmetro uma variável chamada callback. E perceba que na última linha da função nós verificamos qual é o tipo da variável, para garantir que ela é uma função e depois chamamos essa variável com parênteses no fim de seu nome, deixando claro que ela é uma função de callback
Veja agora como poderíamos executar a função writeHello():
writeHello(function() {
console.log('Callback Function');
});
Bem interessante, não acha? Nós chamamos a função writeHello() e já informamos uma função anônima, uma função de callback, que também exibirá uma mensagem no console.
Se acessarmos o console ao executar este código, veremos o seguinte resultado:
As duas mensagens foram exibidas, pois as duas funções foram executadas.
Esse é o conceito das funções de callback. Mas, conforme falamos no artigo anterior, iremos criar um site que irá consumir uma API e exibir as informações na tela. O que acha de começarmos a desenvolver esse projeto, já colocando em prática o que aprendemos sobre callbacks? Preparados? Então, vamos lá!
Todos os códigos que desenvolvermos estarão disponíveis em nosso GitHub
Primeiro, vamos explicar a estrutura do projeto:
Possuímos uma pasta para arquivos de estilo, uma pasta para os arquivo JS, uma pasta para os arquivos de imagem e por fim o nosso arquivo HTML, arquivo de entrada para o projeto.
Na questão de ferramentas externas, iremos usar apenas o Materialize.css para deixar nossa página um pouco mais agradável e simples de estilizar.
De início, nosso projeto está assim:
Agora sim, vamos para a lógica do projeto. Nosso objetivo é digitar o nome de um jogo na caixa de busca e ter os resultados renderizados na área de jogos principais. Em primeiro lugar, vamos precisar de uma função para consumir a API de jogos. Vamos criar essas funções dentro de um arquivo chamado requests.js, que ficará dentro da pasta js.
A primeira função se chamará getGameByName() e esperará dois parâmetros: o nome do jogo que estamos procurando e uma função de callback, que é o tema desse artigo. Seu código será o seguinte:
function getGameByName(name, callback) {
let request = new XMLHttpRequest();
request.open('GET', `https://api.rawg.io/api/games?search=${name}`, true);
request.onload = () => {
let response = JSON.parse(request.response);
if (typeof callback == 'function') callback(response);
};
request.send();
}
Explicando a função: nós iremos criar uma requisição XML por meio da classe XMLHttpRequest(). Lembrando que nós ensinamos os diversos recursos dessa classe e como manipulá-la em nosso Curso Completo de JavaScript.
Continuando a explicação. Após criar essa requisição XML, nós iremos acessar a URL da API, informando o nome que esperamos lá nos argumentos da função. Quando conseguirmos obter os dados nós iremos convertê-los para JSON e, note agora, executar a função de callback, informando os dados dos jogos para essa função. Assim, poderemos fazer o que desejarmos com essas informações, ou seja, poderemos renderizá-las na tela. Precisamos agora chamar essa função que acabamos de criar. O nome dessa função será initGames().
Antes disso, voltando no arquivo HTML, vamos abrir uma tag