Retornos de chamada e promessas | Explicado com exemplos
Neste post, veremos o que são retornos de chamada e promessas em JavaScript explicados com a ajuda de exemplos.
O que são retornos de chamada?
Retornos de chamada são funções que são passadas dentro dos argumentos de outras funções, esse procedimento é válido no JavaScript porque as funções são objetos e objetos podem ser passados como argumentos para funções. A estrutura básica da função de retorno de chamada se parece com isso.
função Demofunction (retorno de chamada)ligar de volta();
Sequência de execução e necessidade de retornos de chamada
As funções de retorno de chamada são usadas para adquirir controle sobre a sequência de execução. Geralmente, as funções são executadas com base na sequência de que são invocadas, não na sequência em que são definidos. Por exemplo:
função job1 ()console.log ("eu sou tarefa 1");
função job3 ()
console.log ("eu sou tarefa 3");
função job2 ()
console.log ("eu sou tarefa 2");
Job1 ();
Job2 ();
Job3 ();
Você obteria a seguinte saída:
Mas e se quisermos invocar a Tarefa 2 somente quando a Tarefa 1 terminar seu processamento. Para isso, precisamos de funções de retorno de chamada e alguma compreensão básica da execução assíncrona.
Um exemplo de retorno de chamada em ação
Considere o seguinte código:
Var membros = ["John Doe", "Sam Smith", "Allie Cartel"];função addNewMember (newUser)
membros.push (newUser);
função getallMembers ()
console.log (membros);
addNewMember ("alfa");
getallMembers ();
Estamos trabalhando com uma matriz que contém a lista de membros de um clube social, e temos duas funções. Uma função que imprime a lista de todos os membros e a outra é usada para adicionar um membro à lista.
Vamos alterar este código para torná -lo imitar o comportamento de bancos de dados reais e atrasos de rede como lag e pings.
Var membros = ["John Doe", "Sam Smith", "Allie Cartel"];função addNewMember (newUser)
setTimeout (function ()
membros.push (newUser);
console.log ("membro adicionado");
, 200);
função getallMembers ()
setTimeout (function ()
console.log ("Os membros são:");
console.log (membros);
, 100);
addNewMember ("alfa");
getallMembers ();
Como você pode ver, este código está usando o setTimeout () função para imitar atrasos nos bancos de dados. O adduser leva cerca de 2 segundos e getallMembers () Função leva 1 segundo.
Queremos adicionar um novo usuário "alfa" e imprimir a lista depois que o membro for adicionado, não antes e é por isso que usamos a sequência:
addNewMember ("alfa");getallMembers ();
Execute o código e você obterá a seguinte saída:
A lista foi impressa primeiro e depois o membro foi adicionado. Isso ocorre porque o programa não esperou pelo adicionar membro() função para terminar o processamento. Agora, se usarmos funções de retorno de chamada para executar o getallMembers () função somente após o AddNewMember () termina, nosso código se torna:
Var membros = ["John Doe", "Sam Smith", "Allie Cartel"];Função AddNewMember (NewUser, retorno de chamada)
setTimeout (function ()
membros.push (newUser);
console.log ("membro adicionado");
ligar de volta();
, 200);
função getallMembers ()
setTimeout (function ()
console.log ("Os membros são:");
console.log (membros);
, 100);
addNewMember ("Alpha", GetallMembers);
Se você olhar para o código, verá que dentro do AddNewMember () Função Estamos assumindo um argumento de retorno de chamada, isso garantirá que a função de retorno de chamada seja executada em nossa sequência desejada.
A saída do snippet de código acima é como:
O novo membro foi adicionado primeiro e depois toda a lista foi impressa no console. É assim que você pode usar retornos de chamada para obter o controle da sequência de execução.
O que são promessas?
Uma promessa é um objeto e é algo que é feito/concluído no futuro. Em JavaScript, é exatamente o mesmo que na vida real. O sintaxe de uma promessa em JavaScript é dada abaixo:
var mypromise = nova promessa (função (resolver, rejeitar)// Algum código
);
Como pode ser visto na sintaxe da promessa, o construtor da promessa aceita apenas a função de retorno de chamada como um argumento. Os parâmetros de resolução e rejeição são usados na função de retorno de chamada, com a resolução sendo chamada quando as atividades realizadas dentro da função de retorno de chamada são bem -sucedidas. Se o procedimento não tiver êxito, no entanto, a rejeição é chamada.
Por exemplo, vamos supor que sua mãe promete que você pega uma bicicleta no seu aniversário. Essa promessa é a garantia dela de que ela comprará uma bicicleta no seu aniversário, no entanto, quando chegar a hora que ela pode mudar de idéia. Então ela pode comprar uma bicicleta para você ou não. Esta é uma promessa na língua leiga simples. Olhando para este exemplo, podemos identificar três estados/ possibilidades de uma promessa em JavaScript:
- Cumprido: a bicicleta é comprada. Valor do resultado
- Pendente: seu aniversário não chegou e você não tem certeza se sua mãe comprará uma bicicleta ou não. Indefinido
- Rejeitado: as bicicletas não são compradas para você no seu aniversário. Erro.
Para entender melhor as promessas, vamos passar por um exemplo:
Vamos dar este exemplo passo a passo I-E primeiro, criaremos um objeto de promessa usando o construtor da promessa, como visto na sintaxe da promessa acima. Em seguida, usaremos esse objeto de promessa.
No código abaixo, nós iremos criar um objeto de promessa:
// Criando objeto de promessavar mypromise = nova promessa (função (resolver, rejeitar)
const number1 = 2;
const number2 = 2;
// Comparando dois números
if (número 1 === número2)
// Operação bem sucedida
resolver();
outro
// Ocorreu um erro
rejeitar();
);
No código acima, primeiro, criamos um objeto de promessa minha promessa, e depois passou uma função de retorno de chamada dentro do construtor da promessa. Na função, estamos verificando se dois números são iguais ou não. Se os números forem iguais, a chamada será resolvida; caso contrário, se um erro ocorrer, a chamada será rejeitada.
Para usar o objeto Promise (minha promessa) nós vamos precisar "promessa consumidores”(Consume promete por registrar funções) conhecido como então() Método de realização e pegar() Método para rejeição. O código abaixo ilustra o seguinte:
minha promessa.então (function ()
console.log ("Números iguais. Sucesso");
).
Catch (function ()
console.log ('erro');
);
Se os números que estão sendo verificados são iguais, então o .então() o método será invocado e veremos “Números iguais. Sucesso”. No entanto, se os números não forem iguais, então o .pegar() o método será invocado e veremos o Erro mensagem na janela do console.
Todo o código é fornecido abaixo:
// Criando objeto de promessavar mypromise = nova promessa (função (resolver, rejeitar)
const number1 = 2;
const number2 = 2;
// Comparando dois números
if (número 1 === número2)
// Operação bem sucedida
resolver();
outro
// Ocorreu um erro
rejeitar();
);
// Use o objeto Promise
minha promessa.
então (function ()
console.log ("Números iguais. Sucesso");
).
Catch (function ()
console.log ('erro');
);
Da saída, podemos ver que os números são iguais.
Conclusão
Para implementar o código assíncrono no JavaScript, usamos funções e promessas de retorno de chamada. Uma função de retorno de chamada é passada como um argumento para outra função, enquanto a promessa é algo que é alcançado ou concluído no futuro. Em JavaScript, uma promessa é um objeto e usamos o construtor da promessa para inicializar uma promessa. Para usar objetos de promessa, recebemos ajuda dos consumidores de promessa que são então() método (se prometido cumprido) e pegar() Método (se a promessa for rejeitada).