Voltar para o Blog Iniciante • 5 min

Guia Rápido: Como Usar Async/Await no JavaScript

Aprenda a utilizar async/await para lidar com operações assíncronas de forma mais legível e organizada.

O que é Async/Await?

Async/Await é uma forma mais moderna e legível de lidar com operações assíncronas no JavaScript, substituindo o uso excessivo de .then() e .catch().

Transformando uma função assíncrona

Uma função marcada como async sempre retorna uma Promise. O await faz com que a execução espere a resolução da Promise antes de continuar.

async function obterDados() {
  return 'Dados carregados!';
}

obterDados().then(console.log);

Usando Await com Fetch

Vamos buscar dados de uma API pública usando fetch com async/await:

async function carregarUsuarios() {
  try {
    const resposta = await fetch('https://jsonplaceholder.typicode.com/users');
    const usuarios = await resposta.json();
    console.log(usuarios);
  } catch (erro) {
    console.error('Erro ao carregar usuários:', erro);
  }
}

carregarUsuarios();

Exemplo Prático

Copie e cole este código em um arquivo HTML para testar:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Async/Await no JavaScript</title>
</head>
<body>
  <h1>Lista de Usuários</h1>
  <ul id="lista"></ul>
  <script>
    async function carregarUsuarios() {
      try {
        const resposta = await fetch('https://jsonplaceholder.typicode.com/users');
        const usuarios = await resposta.json();
        const lista = document.getElementById('lista');
        usuarios.forEach(usuario => {
          const item = document.createElement('li');
          item.textContent = usuario.name;
          lista.appendChild(item);
        });
      } catch (erro) {
        console.error('Erro ao carregar usuários:', erro);
      }
    }
    carregarUsuarios();
  </script>
</body>
</html>

Próximos passos

Experimente modificar o código para buscar outros tipos de dados e tratar erros de rede.