Async e Await Javascript

Tempo de leitura: 3 minutos

Async e Await Javascript: O async/await, introduzido no ECMAScript 2017 (ES8), é a solução mais elegante para lidar com Promises. Ele permite escrever código assíncrono que se parece e se comporta como código síncrono, eliminando a necessidade de encadeamentos longos de .then().

Na sua essência, o async/await é um açúcar sintático sobre as Promises.

1. As Palavras-Chave: `async` e `await`

O async/await funciona através da interação de duas palavras-chave obrigatórias:

A. `async` (A Função)

Usada para declarar que uma função é assíncrona. Uma função async tem duas regras:

Ela sempre retorna uma Promise, mesmo que você retorne um valor simples.
Ela permite o uso da palavra-chave await dentro de seu corpo.

JavaScript

// Retorna uma Promise resolvida com o valor 10
async function valorAsync() {
  return 10; 
}
valorAsync().then(resultado => console.log(resultado)); // Saída: 10

B. `await` (A Pausa)

Usada somente dentro de funções async. O await faz com que a execução da função pause até que a Promise à sua direita seja resolvida (fulfilled). Uma vez resolvida, o valor é extraído e atribuído à variável.

JavaScript

async function buscarDados() {
  // A função PAUSA aqui até que a Promise de 'fetch' resolva.
  const response = await fetch('https://api.exemplo.com/data'); 
  
  // A função PAUSA novamente até que a Promise de 'json()' resolva.
  const dados = await response.json(); 
  
  return dados;
}

2. Gerenciamento de Erros com `try...catch`

Uma das maiores vantagens do async/await é a simplificação do tratamento de erros. Em vez de usar o .catch() no final de uma cadeia, você pode usar o bloco try...catch familiar, exatamente como faria em código síncrono.

Se qualquer Promise com await for rejeitada (rejected), a exceção é lançada e pode ser capturada pelo bloco catch mais próximo.

JavaScript

async function buscarDadosComTratamento() {
  try {
    const response = await fetch('url-invalida');
    
    // Se a requisição acima falhar, o código pula imediatamente para o 'catch'.
    const data = await response.json();
    return data;

  } catch (error) {
    console.error("Erro na busca de dados:", error.message);
    // Podemos retornar ou relançar o erro aqui, se necessário.
    return null; 
  }
}

3. Lidando com Múltiplas Promises Independentes

Quando você tem várias Promises que não dependem do resultado uma da outra, usar await sequencialmente as torna mais lentas, pois cada uma espera a anterior.

A solução é usar Promise.all() (introduzido no artigo anterior) em conjunto com await. Isso permite que as Promises sejam executadas em paralelo, e o await pausa apenas para coletar os resultados após todas terem terminado.

JavaScript

async function buscarMultiplosDados() {
  const promise1 = fetch('api/data1');
  const promise2 = fetch('api/data2');

  // As requisições são iniciadas em paralelo, mas o await espera o resultado de AMBAS.
  const [res1, res2] = await Promise.all([promise1, promise2]); 
  
  const data1 = await res1.json();
  const data2 = await res2.json();

  return { data1, data2 };
}

✅ Conclusão Async e Await Javascript

Async e Await Javascript: O async/await é o padrão-ouro para escrever código assíncrono hoje. Ele transforma o gerenciamento de Promises em um fluxo de leitura linear e síncrono, simplifica o fluxo de controle e permite o uso natural do try...catch para lidar com erros. Ao dominar o async/await, você escreve código assíncrono que é drasticamente mais limpo, legível e fácil de depurar do que o encadeamento tradicional de .then().

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: