Usando Async/Await para um Código Assíncrono Mais Limpo
A sintaxe async/await é uma abordagem moderna e mais legível para trabalhar com promessas em JavaScript. Permite que desenvolvedores escrevam código assíncrono que se assemelha e se comporta como código síncrono. Em vez de encadear chamadas then(), é possível utilizar await para pausar a execução de uma função async até que uma promessa seja resolvida.
Como funcionam as funções async
Uma função async é uma função declarada com a palavra-chave async. Ela retorna uma Promise por padrão, e é possível utilizar a palavra-chave await dentro dela para pausar a execução até que a promessa seja resolvida.
index.html
index.js
A função fetchData é declarada como async, permitindo o uso de await para pausar a execução até que uma promessa seja resolvida. Neste exemplo, um atraso simulado de 2 segundos imita uma operação de busca de dados. Após a resolução, o resultado ("Data fetched successfully!") é exibido no parágrafo HTML.
Simplificação de Cadeias de Promessas com Async/Await
Ao trabalhar com múltiplas operações assíncronas em sequência, o uso de async/await pode simplificar o código que, de outra forma, envolveria encadeamento de promessas com then().
Veja como uma série de promessas (como buscar e processar dados) pode ser tratada de forma mais clara com async/await.
index.html
index.js
A função processData chama três funções assíncronas—fetchData, processFetchedData e displayProcessedData—uma após a outra, cada uma aguardando (await) a conclusão da operação anterior antes de prosseguir para a próxima. Esse fluxo estruturado elimina a necessidade de encadeamento de promessas, melhorando a legibilidade. O resultado final ("Raw Data processed and displayed on the page") é então exibido no HTML.
Tratamento de Erros com try...catch em Async/Await
O tratamento de erros em cadeias de promessas com .catch() pode se tornar trabalhoso, especialmente ao lidar com múltiplas operações assíncronas. Com async/await, é possível tratar erros utilizando o bloco tradicional try...catch, tornando o tratamento de erros mais intuitivo e legível.
index.html
index.js
Na função fetchDataWithError, o bloco try executa a operação await e, se for bem-sucedida, o resultado é exibido no HTML. Se ocorrer um erro (como simulado por simulateError), o bloco catch lida com ele definindo o texto do parágrafo para a mensagem de erro ("Error: Something went wrong!").
1. O que faz a palavra-chave async quando adicionada a uma função?
2. Qual é o propósito da palavra-chave await?
3. Qual dos seguintes é um benefício de usar async/await em vez de encadeamento com .then()?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you show an example of how to use async/await in a real-world scenario?
How does async/await compare to using plain promises with then() and catch()?
Can you explain how error handling works with async/await in more detail?
Awesome!
Completion rate improved to 2.22Usando Async/Await para um Código Assíncrono Mais Limpo
Deslize para mostrar o menu
A sintaxe async/await é uma abordagem moderna e mais legível para trabalhar com promessas em JavaScript. Permite que desenvolvedores escrevam código assíncrono que se assemelha e se comporta como código síncrono. Em vez de encadear chamadas then(), é possível utilizar await para pausar a execução de uma função async até que uma promessa seja resolvida.
Como funcionam as funções async
Uma função async é uma função declarada com a palavra-chave async. Ela retorna uma Promise por padrão, e é possível utilizar a palavra-chave await dentro dela para pausar a execução até que a promessa seja resolvida.
index.html
index.js
A função fetchData é declarada como async, permitindo o uso de await para pausar a execução até que uma promessa seja resolvida. Neste exemplo, um atraso simulado de 2 segundos imita uma operação de busca de dados. Após a resolução, o resultado ("Data fetched successfully!") é exibido no parágrafo HTML.
Simplificação de Cadeias de Promessas com Async/Await
Ao trabalhar com múltiplas operações assíncronas em sequência, o uso de async/await pode simplificar o código que, de outra forma, envolveria encadeamento de promessas com then().
Veja como uma série de promessas (como buscar e processar dados) pode ser tratada de forma mais clara com async/await.
index.html
index.js
A função processData chama três funções assíncronas—fetchData, processFetchedData e displayProcessedData—uma após a outra, cada uma aguardando (await) a conclusão da operação anterior antes de prosseguir para a próxima. Esse fluxo estruturado elimina a necessidade de encadeamento de promessas, melhorando a legibilidade. O resultado final ("Raw Data processed and displayed on the page") é então exibido no HTML.
Tratamento de Erros com try...catch em Async/Await
O tratamento de erros em cadeias de promessas com .catch() pode se tornar trabalhoso, especialmente ao lidar com múltiplas operações assíncronas. Com async/await, é possível tratar erros utilizando o bloco tradicional try...catch, tornando o tratamento de erros mais intuitivo e legível.
index.html
index.js
Na função fetchDataWithError, o bloco try executa a operação await e, se for bem-sucedida, o resultado é exibido no HTML. Se ocorrer um erro (como simulado por simulateError), o bloco catch lida com ele definindo o texto do parágrafo para a mensagem de erro ("Error: Something went wrong!").
1. O que faz a palavra-chave async quando adicionada a uma função?
2. Qual é o propósito da palavra-chave await?
3. Qual dos seguintes é um benefício de usar async/await em vez de encadeamento com .then()?
Obrigado pelo seu feedback!
