Você já ouviu falar da funcionalidade async, também chamada de await? Essa função está bastante associada ao contexto de assincronicidade, ou seja, algo que não ocorre nem se efetiva ao mesmo tempo.
A proposta do async/await é simplificar o uso de forma síncrona. Com isso, tornam o código assíncrono menos “inteligente” e mais legível.
Nesse artigo, vamos falar sobre a possibilidade de criar funções assíncronas e como trabalhar com elas de forma bem simples a partir da funcionalidade async.
Além disso, vamos esclarecer o que são promessas e a relação do then nesse processo. Acompanhe nosso conteúdo e boa leitura!
Crie sistemas web e aplicativos mobile de forma simples e visual. Confira!
O que é o async/await?
Em primeiro lugar, é essencial compreender o que é async ou await. O async function define uma função assíncrona, que retorna um objeto AsyncFunction. Ele é utilizado em linguagens de programação como o Java Scrypit.
Essas duas palavras chaves (async e await) funcionam como uma sintaxe que simplifica a programação assíncrona, de maneira a facilitar o fluxo de escrita e leitura do código.
A partir disso, torna-se possível escrever código que funciona de forma assíncrona mas que é, ao mesmo tempo, estruturado de forma síncrona.
Como e quando usar o async/await no JavaScript?
A sintaxe do async/await pode ser definido da seguinte forma:
- Nome: o nome da função;
- Param: um parâmetro a ser passado para a função.
- Instruções: as instruções que compõem o corpo da função.
Dessa forma, o comando se estabelece assim:
- async function nome([param[, param[, … param]]]) {instruções}
Agora, você pode estar se perguntando: como usar, na prática, a funcionalidade async/await? Para exemplificar isso, vamos trazer o exemplo do site imasters.
O primeiro passo é converter a declaração function para async function. Desta forma, estamos definindo que esta função será assíncrona.
Depois, será preciso usar o’await’ para cada processamento assíncrono dentro da função.
Com isso, a própria leitura/interpretação do código fica mais fácil utilizando async/await. Dessa forma, o away faz parecer que se está programando de forma síncrona.
Executando o código, então, se temos o mesmo resultado.
O que são promessas?
Quando uma função assíncrona é acionada, ela retorna uma promisse, ou seja, uma promessa.
Quando utilizamos await, o JavaScript vai aguardar até que a promessa finalize. Caso ela seja finalizada com sucesso, na qual o termo utilizado é fulfilled), o valor obtido é retornado.
Por outro lado, caso a Promise seja rejeitada, na qual o termo utilizado é rejected), será retornado o erro lançado pela exceção.
A expressão await dentro de uma função assíncrona vai pausar a execução até receber a resolução da Promise Passada. A partir disso, vai poder retomar a execução da função assíncrona e o valor resolvido.
O grupo de promessas, portanto, terá seus procedimentos executados a partir do async. Os Promises são similares a callbacks estruturados,
Dá pra utilizar async/await com promises?
As promises têm um método chamado .then(), que recebe uma função callback e retorna um “objeto-promessa”. Isso significa que, em vez de se ter um retorno dos dados, se tem a promessa do retorno destes dados.
É possível, ainda, combinar e utilizar async/await junto com promessas, afinal, funções assíncronas sempre retornam promises. A seguir, trazemos outro exemplo explorado pelo imasters para ver o uso de forma prática.
No exemplo atual, estamos retornando o objeto person da função assíncrona e utilizando promises para exibir o resultado no console, visto que o retorno da função é uma promise.
Executando o código, ainda temos o mesmo resultado:
No exemplo acima, estamos armazenando o retorno da chamada response.json() na variável person e retornando-a. Para simplificar tudo isso, podemos retornar de maneira direta o resultado da chamada response.json().
Ao executar o código, ainda temos o mesmo resultado.
Qual a diferença entre .then() e async/await?
Falamos sobre o then, porém, não explicamos a diferença em relação ao async.
O async/await pode ser interpretado como uma opção mais “legível” ao .then(). No entanto, é essencial ressaltar que não se tratam de métodos equivalentes.
Ao passo que o async/await faz o processamento de forma sequencial, as promessas com .then() são processadas em paralelo. Dessa forma, o último método passa a ser mais rápido.
Embora o async/await facilite a escrita e a interpretação do código, ele não é tão flexível, visto que só funciona com uma promise por vez.
A diferença entre eles é que, em termos de sintaxe, o método .then() oferece uma sintaxe que faz mais sentido ao usar o JavaScript de forma funcional, por exemplo.
O async/await, por outro lado, faz mais sentido ao ser usado em métodos de classes durante o fluxo das declarações.
Vamos considerar esse exemplo:
- async function getCustomerOrders(customerId) {
- const response = await fetch(`https://api.com/api/customer/${customerId}`)
- const customer = await response.json()
- return await Promise.all(customer.orders.map(async (orderId) => {
- const response = await fetch(`https://api.com/api/order/${orderId}`)
- const orderData = await response.json()
- return orderData.amount
- }))
- }
Para ele, foi optado pelo Promise.all para fazer as requisições em paralelo, sem aguardar a anterior retornar para fazer a próxima.
Devo usar Async / Await ao invés de then()?
Como falamos, cada um pode ser mais interessante a depender do caso. Considerando isso, a escolha sempre vai depender muito da situação. É interessante escolher o que irá permitir uma melhor leitura e entendimento do código.
É comum que alguns desenvolvedores optem pela preferência pessoal, enquanto outros definem um padrão único a se seguir para todo o projeto.
Crie sistemas web e aplicativos mobile de forma simples e visual. Confira!
Conclusão
Nesse artigo a gente te mostrou o que é a funcionalidade async/await dentro do Java e qual é a relação dela com as promessas. Além disso, mostramos a diferença dele em relação ao then.
O async é uma função que oferece diversos benefícios e vantagens quando se trabalha com funções assíncronas!