Funcionamento requisições assíncronas | JavaScript: consumindo e tratando dados de uma API

Olá, gostaria de saber como funcionariam estas requisições assíncronas com o async/await.

No caso do código abaixo que representa o conteúdo da aula, ao chamar a função buscaEndereco(cep), ela fica:

a) Executando em call back (em segundo plano) dentro da call stack, deixando executar o console.log("imprimiu sem esperar buscaEndereco cep"); e atualiza os campos assim que receber a response da promise.

b) Interrompe o fluxo da informação impedindo a execução do console.log("imprimiu sem esperar buscaEndereco cep"); até receber a resposta da função, seja positiva ou negativa.

async function buscaEndereco(cep) {...
}

var cep = document.getElementById('cep');
cep.addEventListener("focusout", () => buscaEndereco(cep.value));

console.log("imprimiu sem esperar buscaEndereco cep");

Fico grato por alguma resposta!

Obrigado!

Olá Anderson, tudo bem?

Funciona assim: requisições assíncronas trabalham em segundo plano, isto é, sem interferir na thread principal do programa.

Pegue como exemplo o código abaixo que você pode testar diretamente no console do navegador:

async function buscarEndereco(cep) {
    const respostaServidor = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
    const dadosCep = await respostaServidor.json();
    console.log("Dados do CEP recebidos!");
    console.log(`${dadosCep.logradouro}, ${dadosCep.localidade}, ${dadosCep.uf}`);
}
buscarEndereco("04101-300");
console.log("Esta mensagem aparece antes dos dados do CEP!");

Ao executarmos esse código veremos na tela do console primeiro a mensagem "Esta mensagem aparece antes dos dados do CEP!" e depois de um tempinho aparecem os dados do CEP logo abaixo.

Aliás, esse comportamento define o que chamamos de código ASSÍNCRONO que é essa espécie de "paralelismo" na execução: o código principal continua sendo executado e a parte assíncrona é levada para um segundo plano para não atrapalhar. Se a execução fosse SÍNCRONA, a janela do console ficaria congelada (sem mostrar nada para nós) até que os dados do CEP sejam retornados da API ViaCep e só então a última mensagem seria exibida.

É por isso que operações consideradas "pesadas" ou cujo tempo de processamento não é muito claro, em geral, são processadas de forma assíncrona. Alguns exemplos de cenários são:

Operações com APIs externas;
Operações com bancos de dados;
Acesso e manipulação ao sistema de arquivos do servidor (ou mesmo do usuário);

Espero ter ajudado.

Att.