Async e Await Javascript: A programação assíncrona é fundamental em JavaScript para criar aplicações responsivas e eficientes. As promises foram um grande avanço na forma de lidar com operações assíncronas, mas a sintaxe ainda podia ser complexa em cenários mais elaborados.
Para resolver esse problema, o ECMAScript 2017 introduziu o async/await, uma sintaxe que torna o código assíncrono mais parecido com o código síncrono, facilitando a leitura e a escrita.
Neste artigo, vamos mergulhar no mundo do async/await, explorando como essa sintaxe moderna simplifica a programação assíncrona em JavaScript.
O que são Async/Await?
- Async: Uma palavra-chave que indica que uma função é assíncrona e retorna uma promise.
- Await: Uma palavra-chave usada dentro de funções async para esperar que uma promise seja resolvida.
Exemplo:
JavaScript
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}Como funciona o Async/Await?
Quando uma função é marcada como async, ela retorna implicitamente uma promise. A palavra-chave await faz com que a execução da função pause até que a promise seja resolvida. O valor resolvido da promise é então atribuído à variável.
Vantagens do Async/Await
- Sintaxe mais limpa: O código se torna mais legível e fácil de entender.
- Gerenciamento de erros: O
try...catchpode ser usado para tratar erros de forma mais natural. - Melhor fluxo de controle: O código parece mais síncrono, facilitando o raciocínio.
Exemplos Práticos
Exemplo 1: Fazendo uma requisição HTTP:
JavaScript
async function buscarUsuario(id) {
const response = await fetch(`https://api.github.com/users/${id}`);
const data = await response.json();
return data;
}
buscarUsuario('octocat')
.then(user => {
console.log(user.name);
})
.catch(error => {
console.error(error);
});Exemplo 2: Lidando com múltiplas promises:
JavaScript
async function fetchData() {
const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const [data1, data2] = await Promise.all([promise1, promise2]);
return { data1, data2 };
}Async/Await e Erros
JavaScript
async function fetchDataWithError() {
try {
const response = await fetch('https://api.example.com/data-inexistente');
const data = await response.json();
return data;
} catch (error) {
console.error('Erro:', error);
}
}Async/Await e Funções Geradoras
As funções async/await são construídas sobre funções geradoras e iteradores. Isso permite que a execução de uma função async seja pausada e retomada em diferentes pontos.
Quando usar Async/Await?
O async/await é ideal para operações assíncronas que exigem um fluxo de controle mais linear e legível. Ele é especialmente útil em cenários onde você precisa esperar por múltiplas promises ou lidar com erros de forma mais elegante.
Comparação com Promises
| Característica | Promises | Async/Await |
|---|---|---|
| Sintaxe | Mais verbosa, utiliza then/catch | Mais concisa, similar a código síncrono |
| Fluxo de controle | Mais difícil de acompanhar em operações complexas | Mais intuitivo e fácil de seguir |
| Erros | Utilizam catch para tratar erros | Utilizam try/catch |
Conclusão
Async e Await Javascript: O async/await é uma adição poderosa ao JavaScript que simplifica significativamente a programação assíncrona. Ao entender os conceitos básicos e as melhores práticas, você poderá escrever código mais limpo, eficiente e fácil de manter.
Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:
E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados:
