Aprenda e entenda os fundamentos das callbacks em apenas 6 minutos com exemplos fáceis.
O que é um retorno de chamada – Callback?
Simplificando: Um retorno de chamada é uma função que deve ser executada após a conclusão de outra função – daí o nome ‘Callback’.
Colocado de forma mais complexa: em JavaScript, funções são objetos. Por causa disso, as funções podem ter funções como argumentos e podem ser retornadas por outras funções. As funções que fazem isso são chamadas de funções de ordem superior. Qualquer função passada como argumento é chamada de função de callback.
São muitas palavras. Vejamos alguns exemplos para detalhar um pouco mais.
Por que precisamos de Callbacks?
Por uma razão muito importante – JavaScript é uma linguagem orientada a eventos. Isso significa que, em vez de esperar por uma resposta antes de prosseguir, o JavaScript continuará em execução enquanto escuta outros eventos. Vejamos um exemplo básico:
function first(){
console.log(1);
}
function second(){
console.log(2);
}
first();
second();
Como seria de se esperar, a função é executada primeiro primeiro e a função depois é executada em segundo – registrando o seguinte no console:
// 1
// 2
Tudo bem até agora.
Mas e se a função first() contiver algum tipo de código que não pode ser executado imediatamente? Por exemplo, uma solicitação de API para a qual devemos enviar a solicitação e esperar uma resposta? Para simular essa ação, íamos usar setTimeout, que é uma função JavaScript que chama uma função após um determinado período de tempo. Vamos atrasar nossa função por 500 milissegundos para simular uma solicitação de API. Nosso novo código terá a seguinte aparência:
function first(){
// Simulando delay no codigo
setTimeout( function(){
console.log(1);
}, 500 );
}
function second(){
console.log(2);
}
first();
second();
Não é importante que você entenda como setTimeout() funciona agora. Tudo o que importa é que você vê que mudamos nosso console.log (1); dentro de nosso atraso de 500 milissegundos. Então, o que acontece agora quando invocamos nossas funções?
first(); second(); // 2 // 1
Mesmo que invocemos a função first () primeiro, desconectamos o resultado dessa função após a função second ().
Não é que o JavaScript não executou nossas funções na ordem que queríamos; em vez disso, o JavaScript não esperou por uma resposta do primeiro () antes de prosseguir para executar o segundo ().
Então, por que mostrar isso? Porque você não pode simplesmente chamar uma função após a outra e esperar que sejam executadas na ordem certa. Callbacks são uma forma de garantir que determinado código não seja executado até que outro código já tenha concluído a execução.
Criar um retorno de chamada
Tudo bem, chega de conversa, vamos criar um retorno de chamada!
Primeiro, abra o Console do desenvolvedor do Chrome (Windows: Ctrl + Shift + J) (Mac: Cmd + Option + J) e digite a seguinte declaração de função em seu console:
function doHomework(subject) {
alert(`Iniciando meu ${subject} em casa.`);
}
Acima, criamos a função fazer lição de casa. Nossa função assume uma variável, o assunto no qual estamos trabalhando. Chame sua função digitando o seguinte em seu console:
doHomework('exercicio de matematica');// Alerts: Iniciando meu exercicio de matematica em casa.
Agora vamos adicionar nosso retorno de chamada – como nosso último parâmetro na função doHomework (), podemos passar um retorno de chamada. A função de retorno de chamada é então definida no segundo argumento de nossa chamada para doHomework ().
function doHomework(subject, callback) {
alert(`Iniciando meu ${subject} de casa.`);
callback();
}
doHomework('math', function() {
alert('Dever de casa terminado');
});
Como você verá, se digitar o código acima em seu console, você receberá dois alertas consecutivos: O alerta de ‘lição de casa inicial’, seguido pelo alerta de ‘lição de casa concluída’.
Mas as funções de retorno de chamada nem sempre precisam ser definidas em nossa chamada de função. Eles podem ser definidos em outro lugar em nosso código, como este:
function doHomework(subject, callback) {
alert(`Iniciando meu ${subject} de casa.`);
callback();
}
function alertFinished(){
alert('Dever de casa terminado');
}
doHomework('math', alertFinished);
O resultado deste exemplo é exatamente o mesmo do exemplo anterior, mas a configuração é um pouco diferente. Como você pode ver, passamos a definição da função alertFinished como um argumento durante nossa chamada de função doHomework ()!
Para terminar
Um retorno de chamada é importante aqui porque precisamos esperar por uma resposta do servidor antes de prosseguirmos em nosso código. Não sabemos se nossa solicitação de API será bem-sucedida ou não depois de enviar nossos parâmetros para pesquisa / tweets por meio de uma solicitação get, esperamos. Assim que o Twitter responde, nossa função de retorno de chamada é invocada. O Twitter enviará um objeto err (erro) ou um objeto de resposta de volta para nós. Em nossa função de retorno de chamada, podemos usar uma instrução if () para determinar se nossa solicitação foi bem-sucedida ou não e, em seguida, agir de acordo com os novos dados.
Bom trabalho! Agora você pode (idealmente) entender o que é um retorno de chamada e como funciona. Esta é apenas a ponta do iceberg com callbacks, ainda há muito mais para aprender! Eu publico alguns artigos / tutoriais a cada semana, por favor digite seu e-mail aqui se você gostaria de ser adicionado à minha lista de e-mail semanal.
Acesse nosso blog ! E Siga-nos em nossas redes sociais Facebook : @johnpiresdev e Instagram: @johnpiresdev