WDD 231: Desenvolvimento Frontend para Web I

S02 – Atividade de Aprendizagem: async/await em JavaScript

Visão Geral

Imagine que você está pedindo comida pela internet. Você clica em "pedir" e depois...espera. Não dá para fazer mais nada em relação a esse pedido até a comida chegar, certo? É mais ou menos assim que o código JavaScript síncrono tradicional se comporta ao lidar com tarefas demoradas como buscar dados. Você envia uma requisição e fica esperando uma resposta. É como esperar que sua comida seja entregue.

Mas e se você pudesse continuar fazendo outras coisas enquanto espera a comida chegar? É aí que entra o async/await. Ele permite que você escreva código que parece síncrono (como se você estivesse esperando a comida), mas, nos bastidores, é assíncrono (como se você estivesse realizando outras tarefas enquanto espera).

Nesta atividade de aprendizagem, você aprenderá sobre async e await e, em uma atividade de aprendizagem separada sobre a Fetch API, você praticará seu uso.

Preparação

Async/await é a maneira moderna de lidar com operações assíncronas. Permite que você escreva código assíncrono que se parece e se comporta como código síncrono, o que facilita a leitura e manutenção.

Promises

Async/await baseia-se em promises, então você precisa entender como as promises funcionam antes de começar a usar async/await. Uma promise é um objeto que representa a conclusão (ou falha) futura de uma operação assíncrona e seu valor resultante. Ao criar uma promise, você pode adicionar retornos de chamada para lidar com o sucesso ou a falha dessa operação.

Aqui está um exemplo simples de uma promise:

const minhaPromise = new Promise((resolver, rejeitar) => {
  const sucesso = true; // Simule sucesso ou falha
  if (sucesso) {
    resolver("A operação foi bem-sucedida!");
  } else {
    rejeitar("A operação falhou.");
  }
});

Neste exemplo, é criada uma promise que simula uma operação assíncrona. Se a operação for bem-sucedida, a função resolver será chamada com uma mensagem de sucesso. Se falhar, a função rejeitar será chamada com uma mensagem de erro.

Para processar o resultado de uma promise, você pode usar os métodos .then() e .catch():

minhaPromise
  .then((resultado) => {
    console.log(resultado); // Saída: "A operação foi bem-sucedida!"
  })
  .catch((erro) => {
    console.error(erro); // Saída: "A operação falhou."
  });

Neste exemplo, se a promise for resolvida com êxito, a respectiva mensagem será registrada no console. Se falhar, a mensagem de erro será registrada.

Async/Await

Agora, vamos ver como async/await pode simplificar esse processo. A palavra-chave async é usada para definir uma função assíncrona, enquanto a palavra-chave await é usada para pausar a execução dessa função até que uma promise seja resolvida ou rejeitada.

Veja como você pode reescrever o exemplo anterior usando async/await:

const minhaFuncaoAsync = async() => {
  try {
    const resultado = await minhaPromise; // Aguarde a resolução da promise
    console.log(resultado); // Saída: "A operação foi bem-sucedida!"
  } catch (erro) {
    console.error(erro); // Saída: "A operação falhou."
  }
};

Neste exemplo, minhaFuncaoAsync é definida como uma função assíncrona usando a palavra-chave async. Dentro da função, a palavra-chave await é usada para pausar a execução até que minhaPromise seja resolvido ou rejeitado. Se a promise for resolvida com êxito, o resultado será registrado no console. Se falhar, o erro também será detectado e registrado no console.

Async/await faz com que seu código pareça mais com código síncrono, facilitando a leitura e o entendimento. Isso também ajuda a evitar o "callback infierno", em que retornos de chamada aninhados deixam seu código confuso e difícil de acompanhar.

Aqui está um exemplo simples de uso de async/await para buscar dados de uma API:

const buscarDados = async() => {
  try {
    const resposta = await fetch("https://jsonplaceholder.typicode.com/posts/1"); // Aguarde a conclusão da busca
    const dados = await resposta.json(); // Aguarde a conversão da resposta para JSON
    console.log(dados); // Exiba os dados buscados
  } catch (erro) {
    console.error("Erro ao buscar dados:", erro); // Processamento de erros
  }
};

Neste exemplo, a função buscarDados é definida como uma função assíncrona. Dentro da função, a palavra-chave await é usada para pausar a execução até que a requisição de busca seja concluída e a resposta seja convertida em JSON. Se ocorrerem erros durante esse processo, eles serão detectados e registrados.

Async/await é um recurso poderoso para lidar com operações assíncronas em JavaScript. Ele permite que você escreva código mais organizado e fácil de ler, sem perder as vantagens da programação assíncrona.

Atividade de Aprendizagem

Você terá a oportunidade de usar async/await na próxima atividade de aprendizagem (Fetch API), em que você buscará dados de profetas dos últimos dias de um arquivo JSON e os processará para criar uma página assim que os dados estiverem disponíveis.