Iniciando com Async/Await no Javascript

Estamos vivendo a época dos serviços no desenvolvimento web. Temos opções pra praticamente tudo. Se quisermos consultar um CEP, CPF, realizar pagamento, gerar nota fiscal e etc, é só fazer uma pequena busca no Google que encontramos uma infinidade de serviços que podemos consumir de terceiros.

É bem comum a necessidade de realizar uma ou várias requisições a alguma API externa em algum momento no fluxo do nosso código, utilizando o retorno dessa requisição pra executar alguma ação.

Vamos utilizar uma api que retorna os nomes de alguns personagens de Star Wars, a SWAPIpra dar sequência no post.

É comum encontrarmos uma função utilizando fetch pra executar esse fluxo de requisição e utilização dos dados recebidos, no nosso caso utilizando a API SWAPI:

Em seguida encadeamos algumas funções para transformar em JSON os dados da requisição, executamos um map nesses dados e por último imprimimos no console os nomes dos personagens.

Leia mais sobre promises.

OBS: Deixei um console.log propositalno fim da função getStarWarsPeople:

console.log saiu antes dos nomes dos personagens no terminal, como sabemos, o Javascript é executado de forma assíncrona, ou seja, ele não espera o término da função getStarWarsPeople pra executar o console.log(‘Luke i`m your father!’).

E se precisarmos da execução desse código de forma síncrona sem a necessidade de um setTimeout por exemplo?

Async/Await

Uma das formas de resolver isso é utilizar Async/Await, umas das várias recentes implementações do Javascript. Sem muita enrolação, vamos ver o nosso código utilizando Async/Await.

Já podemos perceber uma função mais sequencial e consequentemente melhor de entender, muito se deve a remoção dos “thens” e seu “encadeamento” de execuções, que gera um pouco de confusão principalmente pra quem está começando no Javascript.

Podemos perceber também o uso da palavra chave async antes da palavra chave function, informado ao Javascript de forma explícita “Ei! Essa função tem propriedades assíncronas”.

Da mesma forma, percebemos o uso da palavra await antes da execução do fetch e do .json(), informando ao Javascript “Ei, espere essa instrução ser concluída”.

Conseguimos assim ter a execução na sequência que queremos com o nosso código bem autoexplicativo.

Essa foi uma abordagem bem simples sobre Async/Await, vale a pena investir um tempo em mais algumas leituras sobre esse assunto e testar bastante. 😀

Extra

O Async/Await já está bem implementada na maioria dos navegadores e pode ser utilizado sem problemas.

Aproveitando, não esquece de curtir e seguir a Vídeos de Ti nas redes sociais, blz?