Entenda as funções assíncronas/aguardadas em javascript | Explicado com exemplos
Assíncrono palavra -chave quando usado na definição de uma função faz com que a função retorne um Promessa, enquanto aguardam Função faz com que a função assíncrona aguarde a promessa de devolvida dentro dela. Para entender o uso das funções assíncronas e aguardar, você precisa ter um entendimento agudo de como as promessas funcionam em JavaScript.
Async and Aguard é um conceito JavaScript de nível avançado, é por isso que vamos aprender através de vários exemplos e entendê-lo passando pelo exemplo de linha por linha.
Execução seqüencial em JavaScript
JavaScript é executado sequencialmente ou podemos dizer uma linguagem de script de thread única. O código é invocado linha por linha de maneira processual.
Considere as linhas de código digitado abaixo:
função hello ()console.log ("Hello World");
linuxhint ();
função linuxhint ()
console.log ("tutorial por linuxhint");
console.log ("o código é executado na sequência de que é invocado");
olá();
Observe a saída no console como:
Como você pode ver, as funções ou linhas invocadas primeiro foram sempre terminadas primeiro. O motivo para mostrar um exemplo simples como esse foi fazer você perceber quando a sequência de execução mudará com o assíncrono aguardando e promessas.
Assíncrono/ aguardar em ação
Considere uma função simples que retorne algum texto, como:
função getUsers ()console.log ("dentro da função getUsers");
retornar "usuários";
console.log ("Início do código");
var lista = getUsers ();
console.log (lista);
console.log ("final do código");
A saída do código a seguir é:
Como podemos ver a função retornada como a string que diz, os usuários. Vamos tentar colocar a palavra -chave assíncrono Antes da definição da função como:
função assíncrone getUsers ()console.log ("dentro da função getUsers");
retornar "usuários";
Agora, em seu console, você verá que desta vez a função retornou uma promessa que tinha o status "cumprido":
Mas nos casos em que você está buscando alguns dados de alguma API REST ou de qualquer API da Web, essa promessa mudará vários estados, de pendente para cumprido/rejeitado. Nesses casos, aguardamos o retorno do resultado da promessa usando o aguardam palavra -chave.
Para isso, vamos usar a API buscar e buscar as informações sobre usuários da “API.github/usuários ”com as seguintes linhas de código:
função assíncrone getUsers ()console.log ("dentro da função getUsers");
const Response = aguarda busca ("https: // API.Github.com/usuários ");
console.log ("API respondeu, os usuários recebidos");
const usuários = aguardar resposta.json ();
console.log ("JSON convertido");
devolver usuários;
Há muitas coisas a serem explicadas aqui:
- Quando uma nova variável é inicializada com esta função, a primeira linha será executada e o texto será impresso no console.
- Quando o código atinge a palavra -chave aguardam Ele verificará se a promessa é cumprida ou pendente, se estiver no estado pendente, ele sairá desta função e executará outras partes do código.
- Depois de executar outras partes do código, ele voltará para dentro da função na primeira palavra -chave aguarda e verifique novamente o status da promessa.
- Ao receber um status cumprido/rejeitado, ele executará a próxima linha que é console.registro().
- Na próxima linha, resposta.JSON também é uma promessa, ele verificará seu status e, após o status pendente, sairá da função e executará as outras partes do código.
- Depois que todo o outro código é executado, o ponteiro voltará à função, verifique o status de resposta.JSON, e no status cumprido/rejeitado, ele executará a próxima linha.
Dessa forma, todo esse programa sairá da execução seqüencial normal e implementará uma execução assíncrona do código usando promessas e assíncrono/aguardar palavras-chave.
O trecho de código completo é como:
função assíncrone getUsers ()console.log ("dentro da função getUsers");
const Response = aguarda busca ("https: // API.Github.com/usuários ");
console.log ("API respondeu, os usuários recebidos");
const usuários = aguardar resposta.json ();
console.log ("JSON convertido");
devolver usuários;
console.log ("código inicia");
var lista = getUsers ();
console.log ("lista variável criada");
console.log (lista);
lista.então ((usuário) => console.log (usuário));
console.log ("última linha do código");
Observação: A linha "lista.então ((usuário) => console.log (usuário));”Não será executado até a função getusers lida com todas as promessas e retorna o valor, mesmo aqui a execução seqüencial será alterada.
Agora, se você executar este programa como um script de um arquivo HTML, verá a seguinte saída em seu console:
Examine a saída de perto e você notará o fluxo de execução como:
- O código inicia e a variável é declarada na função.
- O ponteiro entra na função, imprime a primeira linha, vê o aguardam palavra -chave, deixa a função e retorna uma promessa pendente à variável “lista”Que acabamos de criar.
- Executa outras partes do código (é por isso que você pode ver “Última linha do código”) Enquanto espera a promessa no aguardam.
- Vê a linha lista.então() mas não será executado até a função getusers Retorna uma promessa com um status resolvido/rejeitado.
- Volta para dentro da função, a API responde, cria uma lista de usuários e a converte em JSON.
- O status das promessas devolvidas pela função assíncrona getusers mudanças para cumprir e o lista.então() Linha executada e temos os dados JSON impressos no console.
É assim que você altera a execução sequencial e implementa a execução assíncrona
Conclusão
Assíncrono e aguardam As palavras -chave são usadas para implementar a execução assíncrona do código JavaScript com a ajuda de promessas. Assíncrono palavra -chave quando usado antes da declaração de uma função converte que funcione em um função assíncrona e seu tipo de retorno muda para uma promessa. Enquanto aguardam é uma palavra -chave que espera que uma promessa seja recebida dentro de um função assíncrona. Assíncrono/aguardar Ajude -nos a escrever promessas de uma maneira muito mais agradável e arrumada que é mais legível e compreensível.