async e await
Uma função async deixa os passos assíncronos fáceis de ler em sequência. await espera por uma Promise dentro dessa função; não bloqueia a página nem o restante JavaScript.
O que await pausa
Ao chegar a await, a função devolve temporariamente o controlo ao navegador. Outros eventos continuam. Quando a Promise se cumpre, a função retoma no mesmo ponto.
async devolve sempre uma Promise
Mesmo que a função devolva uma string, a chamada produz uma Promise cumprida com ela. Se lançar um erro, a Promise é rejeitada.
Ler o resultado após await
pour devolve uma Promise. serve escreve waiting, espera e depois recebe lida tea.
function pour(order) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (order === "") reject("no leaves");
else resolve(order + " tea");
}, 100);
});
}
async function serve() {
console.log("waiting");
let drink = await pour("lida");
console.log(drink);
}
serve();
As saídas são waiting e depois lida tea. Ambas estão em serve, mas a segunda corre após a resolução.
Quem chama recebe uma Promise
serve() sem await não entrega logo a bebida.
async function serve() {
return "lida tea";
}
let ticket = serve();
console.log(ticket instanceof Promise);
A saída é true: ticket é uma Promise. Leia o valor com await noutra função async ou com then.
Tratar rejeição com try e catch
Uma Promise rejeitada e aguardada comporta-se como um erro lançado em await. Coloque a operação em try.
function pour(order) {
return order === ""
? Promise.reject("no leaves")
: Promise.resolve(order + " tea");
}
async function serveEmpty() {
try {
await pour("");
} catch (reason) {
console.log(reason);
}
}
serveEmpty();
A saída é no leaves. Outros erros no mesmo bloco try também chegam a este catch.
O resto da página continua
Só a função async atual fica em espera. A chamada devolve imediatamente uma Promise, permitindo que o código síncrono seguinte avance.
Exemplo completo no navegador
O exemplo regista as etapas numa função async. Um temporizador curto resolve a Promise, por isso não precisa de servidor.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function pour(order) {
return new Promise(resolve => setTimeout(() => resolve(order + " tea"), 100));
}
async function serve() {
const cup = document.getElementById("cup");
const seen = ["waiting"];
cup.textContent = "waiting";
const drink = await pour("lida");
cup.textContent = drink;
seen.push(drink, "done");
document.getElementById("line").textContent = seen.join(" / ");
}
serve();
</script>
</body>
</html>
A linha final é waiting / lida tea / done. done só é acrescentado depois do valor aguardado.
Experimente
Altere lida, aguarde o resultado e depois passe uma string vazia. catch deve receber no leaves.
Erros comuns
Não espere uma string pronta de uma chamada async. Não use await numa função normal nem suponha que toda a página fica parada.
Memorize
async devolve sempre uma Promise. await pausa apenas essa função até a Promise terminar. Use try/catch quando puder haver rejeição.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo