Async / Await: O "Doce" Sintático

O que vais aprender nesta aula:

  • Transformar Promises em código de aspeto síncrono
  • Palavras-chave: async e await
  • Tratamento de erros com try...catch

🧠 Teoria (com Analogia e Contexto Real)

Antigamente, usávamos .then(). Funciona, mas pode ficar confuso. O async/await (lançado em 2017) é uma forma mais limpa de ler Promises.

⏯️ Analogia do Botão de Pausa

O await é como meter o comando "pausa" num videojogo.

A função pára PONTUALMENTE naquela linha, à espera que a promessa termine, e depois continua.

Importante: Só a função pára, o resto do site continua a funcionar!

💻 Prática (Antes e Depois)

Promessas (Antigo)
function buscarDados() {
  fetch("url")
    .then(res => res.json())
    .then(data => {
      console.log(data);
    })
    .catch(erro => {
      console.error(erro);
    });
}
Async/Await (Moderno)
async function buscarDados() {
  try {
    const res = await fetch("url");
    const data = await res.json();
    console.log(data);
  } catch (erro) {
    console.error(erro);
  }
}

⚡ Mini-App: Pokédex Rápida

Procura um Pokémon pelo nome ou ID (ex: "pikachu", "ditto", "25").

✅ Verificação de Conhecimento

1. A palavra `await` pode ser usada em qualquer função?

Sim, em qualquer sítio.
Não, apenas dentro de funções marcadas com `async`.
Apenas dentro de loops.

2. Como apanho erros no async/await?

Usando `.catch()` no final da função.
O async/await não permite apanhar erros.
Envolvendo o código num bloco `try { ... } catch (erro) { ... }`.

🏠