async/await e tratamento de erros
Escreva funções assíncronas com a palavra-chave await, envolva chamadas aguardadas em blocos try/catch e entenda como async/await é uma simplificação sintática sobre Promises.
async/await e tratamento de erros é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que são async/await?
async/await é uma simplificação sintática sobre promessas. Uma função async sempre retorna uma promessa. A palavra-chave await pausa a função até que a promessa aguardada seja concluída. O código parece síncrono, mas é executado de forma assíncrona.
Função async
Adicione a palavra-chave async antes de uma declaração ou expressão de função. A função passa a envolver implicitamente seu valor de retorno em uma promessa.
async function fetchUser(id) {
// implicitly returns a Promise
return { id, name: 'Alice' };
}
// Equivalent to:
function fetchUser(id) {
return Promise.resolve({ id, name: 'Alice' });
}await — pausando para aguardar promessas
await só pode ser usado dentro de uma função async. Ele pausa a execução até que a promessa seja resolvida e retorna o valor resolvido. Outro código no loop de eventos continua sendo executado.
async function loadProfile(id) {
const user = await fetchUser(id); // waits for Promise
const posts = await fetchPosts(user.id); // waits again
return { user, posts };
}Aguardas sequenciais versus paralelas
Aguardar sequencialmente é fácil de ler, mas é lento quando as tarefas não dependem umas das outras. Use Promise.all() para aguardar várias tarefas independentes em paralelo.
// Sequential (slow if tasks are independent):
const user = await fetchUser(id);
const settings = await fetchSettings(id); // waits for user unnecessarily
// Parallel (fast):
const [user, settings] = await Promise.all([
fetchUser(id),
fetchSettings(id),
]);try/catch para tratamento de erros
Envolva as chamadas aguardadas em try/catch para tratar rejeições. O bloco catch recebe o motivo da rejeição como um objeto de erro.
async function saveUser(data) {
try {
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
});
if (!response.ok) throw new Error(`Server error ${response.status}`);
return await response.json();
} catch (err) {
console.error('Save failed:', err.message);
throw err; // re-throw so caller can handle
}
}await no nível superior
Em módulos ES (não CommonJS), é possível usar await no nível superior sem envolvê-lo em uma função async. Isso é útil para a inicialização de módulos.
// module.js (ES module)
const config = await fetch('/config.json').then(r => r.json());
export const API_URL = config.apiUrl;async/await com forEach — armadilha
Array.forEach() não aguarda funções de retorno assíncronas. Use for...of para iteração assíncrona sequencial ou Promise.all(arr.map(...)) para execução em paralelo.
// WRONG — forEach doesn't await:
items.forEach(async (item) => {
await processItem(item); // runs but forEach doesn't wait
});
// CORRECT — sequential:
for (const item of items) {
await processItem(item);
}
// CORRECT — parallel:
await Promise.all(items.map(item => processItem(item)));Objetos de erro e erros personalizados
Sempre lance objetos de erro, e não strings, para preservar os rastreamentos da pilha. Crie classes de erro personalizadas para erros específicos do domínio, que quem chama possa capturar pelo tipo.
class NetworkError extends Error {
constructor(message, status) {
super(message);
this.name = 'NetworkError';
this.status = status;
}
}
try {
const res = await fetch(url);
if (!res.ok) throw new NetworkError(`Failed`, res.status);
} catch (err) {
if (err instanceof NetworkError && err.status === 401) {
redirectToLogin();
} else {
throw err;
}
}finally em async/await
O bloco finally é executado independentemente de o bloco try ter obtido sucesso ou falhado — assim como .finally() em uma promessa. Use-o para liberar recursos ou ocultar estados de carregamento.
async function loadData() {
setLoading(true);
try {
const data = await fetch('/api/data').then(r => r.json());
setData(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false); // always runs
}
}IIFE assíncrona para pontos de entrada de módulos
Envolva o ponto de entrada de um script em uma IIFE assíncrona quando não for possível usar await no nível superior.
(async () => {
const data = await fetchInitialData();
renderApp(data);
})();AbortController para cancelamento
Passe um sinal de AbortController a uma requisição para cancelar uma operação em andamento. Capturar AbortError separadamente impede que um erro seja exibido ao usuário.
const controller = new AbortController();
try {
const data = await fetch(url, { signal: controller.signal }).then(r => r.json());
setData(data);
} catch (err) {
if (err.name !== 'AbortError') setError(err.message);
}
// Cancel:
controller.abort();Verificação rápida
Qual construção trata corretamente os erros de uma promessa aguardada?
Recapitulação: async/await
Funções async sempre retornam promessas. await pausa até que uma promessa seja concluída. Use try/catch para o tratamento de erros. Para operações paralelas, use Promise.all(). Evite await dentro de forEach — use for...of ou Promise.all. AbortController cancela requisições em andamento. await no nível superior funciona em módulos ES.
Perguntas Frequentes
A aula “async/await e tratamento de erros” é grátis?
Sim — o texto completo de “async/await e tratamento de erros” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “async/await e tratamento de erros”?
Escreva funções assíncronas com a palavra-chave await, envolva chamadas aguardadas em blocos try/catch e entenda como async/await é uma simplificação sintática sobre Promises. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “async/await e tratamento de erros”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O loop de eventos: pilha de chamadas fila microtarefas
- Callbacks e callback hell
- Promises: then catch finally Promise.all
- async/await e tratamento de erros