Aprenda Async Await na prática, de forma simples.

Como tornar seu código mais legível e fácil através desta funcionalidade!

Premissas: Possuir node.js instalado (v7.6 +) , npm e um breve conhecimento de javascript e REST API’s.

Async await é um novo modo de escrever código assíncrono no javascript, que faz com que o código se pareça e se comporte um pouco mais como um código síncrono. Certamente você já ouviu falar dele por ai, mas caso queira entender mais profundamente o conceito, sugiro ler este artigo:

Funções assíncronas

Ok Matheus, mas e cadê a parte prática e simples ?

Vamos construir uma aplicação simples em node.js, que faz a conversão de moedas (ex: real => dollar) e informa em quais países a moeda é utilizada, isto consultando duas api’s disponíveis na web, sem que seja necessário autenticações ou tokens.

Conforme vamos ver logo mais, dentro da nossa aplicação, irão existir 3 funções principais, onde inicialmente iremos construir com base em promises, e então, iremos utilizar o async await em uma delas para refatorar.

As outras duas serão sua tarefa =) Acredite, você terá plenas condições!

Here we go!!

Em uma nova pasta, digite os seguintes comandos:

npm init
# apenas aperte enter para todas as perguntas feitas

Usaremos o axios como lib para fazermos nossas requisições para as API’s, visto que retorna promises, necessárias para trabalharmos com o async await, assim sendo:

npm i axios --save

Projeto configurado, hora de por a mão na massa:

API’s que vamos consumir:

Fixer.io, a qual será responsável por fornecer as taxas de conversões entre as moedas:

Foreign exchange rates and currency conversion JSON API

Rest Countries, será responsável por nos informar quais países utilizam determinada moeda:

REST Countries

Dentro da pasta criada, e onde o npm init foi gerado, crie um novo arquivo (currencyConverter.js) e importe o axios na primeira linha:

const axios = require('axios')

Vamos criar três funções, de modo que funcionem da seguinte maneira:

Funções que serão escritas com promises, e depois refatoradas para async/await

getExchangeRate

Vamos fazer nossa consulta a API deste com o seguinte código:

Onde podemos perceber, que nossa função recebe dois argumentos (from, to). Estes argumentos representam, respectivamente, as moedas para qual realizaremos as conversões.

getCountries

Código bem similar ao anterior, tendo como única diferença, o .map(), que irá reduzir a lista de arrays, para conter apenas os nomes dos países, descartando as demais informações desnecessárias.

convertCurrency

Utilizando promises, o nosso código ficaria deste modo, bem mais legível que utilizando callbacks, mas é aí que o async / await pode nos ajudar ainda mais.

Vamos refatorar?

convertCurrencyAlt (async / await)

Essas duas palavras chaves farão com que nosso código se comporte totalmente diferente do que estamos acostumado (so você apenas programa em JS).

Na imagem abaixo, a função convertCurrency foi escrita com promises, já a função convertCurrencyAlt, foi escrita com async await.

Conforme podemos ver nesta imagem a cima, precisamos declarar nossa função como async, neste caso, estou usando com arrow functions. Após esta etapa, se o código a ser executado for assíncrono, este deve ser precedido pelo await.

Código disponível no github!

matheus-rossi/nodejs

Com isto, basta chamarmos a função deste modo, respeitando os nomes das moedas de acordo com a ISO 4217.

convertCurrencyAlt('BRL', 'USD', 1).then((status) => {  
  console.log(status)
})

E nosso output no terminal, será:

1 BRL is worth 0.31962 USD. 
USD can be used in the following countries: American Samoa, Bonaire, Sint Eustatius and Saba, British Indian Ocean Territory, United States Minor Outlying Islands, Virgin Islands (British), Virgin Islands (U.S.), Cambodia, Ecuador, El Salvador, Guam, Marshall Islands, Micronesia (Federated States of), Northern Mariana Islands, Palau, Panama, Puerto Rico, Timor-Leste, Turks and Caicos Islands, United States of America, Zimbabwe

Bom pessoal, isto é apenas uma pequena amostra do que o async / await pode fazer, espero ter contribuído de alguma forma!

Outro ponto importante, é o error handling, que também funcionará de forma diferente, através de try{} e catch{}, mas este será o assunto do próximo post.

Abraços

See you next week!!