Como dominar a sintaxe assíncrona / aguardar: um exemplo real

Aqui está a tradução de um artigo de Adrian Hajdin, publicado no site do freeCodeCamp. Sob o gato, o autor explica clara e sucintamente a vantagem de async / waitit e mostra em um exemplo concreto como usar essa sintaxe.



Note ...

Eu não apenas escrevi este artigo, mas também criei um vídeo no YouTube!

Você pode seguir as instruções no vídeo e no programa enquanto visualiza. Aconselho que você leia primeiro o artigo e só depois escreva o código durante o vídeo.

Link do vídeo: Aprenda Async / Await neste projeto do mundo real

1. Introdução

Assíncrono / espera é uma nova maneira de escrever código assíncrono. Essa sintaxe é construída sobre as promessas e, portanto, não está bloqueando.

A diferença de outros métodos de criação de código assíncrono é que, na aparência e no comportamento, o código assíncrono implementado por meio de async / waitit se assemelha ao código síncrono. E essa é a vantagem dele.

Os métodos anteriores para organizar o código assíncrono foram retornos de chamada e promessas.

Funções de retorno de chamada em ação

setTimeout(() => { console.log('This runs after 1000 milliseconds.'); }, 1000); 

O Problema da Função de Retorno de Chamada - O Inferno Notório de Retorno de Chamada

Quando você anexa funções de retorno de chamada, o código logo começa a se parecer com o seguinte:


Inferno de retorno de chamada

Inferno de retorno de chamada

Essa é uma situação na qual os retornos de chamada são aninhados em outros retornos de chamada em vários níveis, dificultando a compreensão e o gerenciamento do código.

Promessas em ação

 const promiseFunction = new Promise((resolve, reject) => { const add = (a, b) => a + b; resolve(add(2, 2)); }); promiseFunction.then((response) => { console.log(response); }).catch((error) => { console.log(error); }); 

promessaFunção retorna uma promessa que representa o processo dessa função. A função de resolução faz com que o objeto Promise entenda que o processo está concluído.

Então podemos chamar .then () e .catch () para esta função de promessa:
then - inicia o retorno de chamada que você passa quando a promessa é concluída.
catch - inicia o retorno de chamada que você passa quando algo dá errado.

Funções assíncronas

As funções assíncronas nos fornecem uma sintaxe limpa e concisa que nos permite escrever menos código e obter o mesmo resultado que o uso de promessas. Async não é nada além de açúcar sintático para promessas.

As funções assíncronas são criadas adicionando a palavra-chave async antes da declaração da função, por exemplo:

 const asyncFunction = async () => { // Code } 

As funções assíncronas podem ser pausadas com wait , uma palavra-chave usada apenas na função assíncrona . Aguardar retorna tudo o que a função assíncrona retorna quando é executada.

A diferença entre promessas e assíncrono / espera:

 // Async/Await const asyncGreeting = async () => 'Greetings'; // Promises const promiseGreeting = () => new Promise(((resolve) => { resolve('Greetings'); })); asyncGreeting().then(result => console.log(result)); promiseGreeting().then(result => console.log(result)); 

Assíncrono / espera é como código síncrono, que é muito mais fácil de entender.

Agora que cobrimos os princípios básicos, vamos para um caso de uso real!

Conversor de moeda

Esclarecimento e personalização do projeto

Agora criaremos um aplicativo simples, mas útil (inclusive para treinamento), que aprimorará seu conhecimento geral sobre async / waiting .

O programa terá a quantia em dinheiro, o código da moeda da qual queremos transferir essa quantia e o código da moeda para a qual queremos transferi-la. O programa emitirá a taxa de câmbio correta com base nos dados da API.

Nesta aplicação, obteremos dados de duas fontes assíncronas:

1. Camada de moeda - https://currencylayer.com - você precisará se registrar gratuitamente para usar a chave de acesso da API. Ele nos fornecerá os dados necessários para calcular a taxa de câmbio.
2. Rest Rest Countries - http://restcountries.eu/ - esta API fornecerá informações sobre onde podemos usar a moeda para a qual acabamos de transferir nosso dinheiro.

Primeiro, crie uma nova pasta e execute o npm init , pule todas as etapas e instale o axios digitando npm i -- save axios . Crie um novo arquivo chamado currency-converter.js .

Primeiro solicite axios digitando: const axios = require('axios');

Vamos mergulhar em assíncrono / aguardar

Nosso objetivo é que o programa tenha três funções. Não uma ou duas, mas três funções assíncronas . A primeira função receberá dados sobre moedas, o segundo - sobre os países e o terceiro - para coletar essas informações em um único local e exibi-las ao usuário de maneira ordenada.

A primeira função é o recebimento assíncrono de dados da moeda

Criaremos uma função assíncrona que incluirá dois argumentos - fromCurrency e toCurrency.

 const getExchangeRate = async (fromCurrency, toCurrency) => {} 

Agora você precisa obter os dados. Usando async / waitit, você pode atribuir dados diretamente a uma variável. Não se esqueça de registrar e digitar sua senha.

 const getExchangeRate = async (fromCurrency, toCurrency) => { const response = await axios.get('http://data.fixer.io/api/latest? access_key=[yourAccessKey]&format=1'); } 

Os dados da resposta estão disponíveis em response.data.rates , para que você possa inserir essa expressão em uma variável diretamente abaixo da resposta:

 const rate = response.data.rates; 

Como tudo é convertido em euros, abaixo criaremos uma variável chamada euro, que será igual a 1 / da moeda da qual queremos transferir dinheiro:

 const euro = 1 / rate[fromCurrency]; 

E para obter a taxa de câmbio, você precisa multiplicar o euro pela moeda para a qual queremos transferir dinheiro:

 const exchangeRate = euro * rate[toCurrency]; 

Como resultado, a função deve ser algo como isto:



A segunda função é a aquisição assíncrona de dados sobre o país

Criaremos uma função assíncrona que usará currencyCode como argumento:

 const getCountries = async (currencyCode) => {} 

Como na última vez, vamos obter os dados e atribuí-los a uma variável:

 const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${currencyCode}`); 

Em seguida, combinaremos os dados e retornaremos country.name para cada código de moeda:

 return response.data.map(country => country.name); 

Como resultado, a função deve ser algo como isto:



A terceira e última função - combinamos tudo
Criaremos uma função assíncrona que incluirá fromCurrency , toCurrency e a soma como argumentos:

 const convert = async (fromCurrency, toCurrency, amount) => {} 

Primeiro, obtemos os dados da moeda:

 const exchangeRate = await getExchangeRate(fromCurrency, toCurrency); 

Em seguida, dados do país:

 const countries = await getCountries(toCurrency); 

Depois disso, salve a quantidade convertida em uma variável:

 const convertedAmount = (amount * exchangeRate).toFixed(2); 

Como resultado, exibimos tudo isso para o usuário:

 return `${amount} ${fromCurrency} is worth ${convertedAmount} ${toCurrency}. You can spend these in the following countries: ${countries}`; 

Juntos, deve ficar assim:



Adicionando uma instrução try / catch para manipular erros
Precisamos agrupar nossa lógica com um bloco try / catch para detectar erros, se houver:

 const getExchangeRate = async (fromCurrency, toCurrency) => { try { const response = await axios.get('http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1'); const rate = response.data.rates; const euro = 1 / rate[fromCurrency]; const exchangeRate = euro * rate[toCurrency]; return exchangeRate; } catch (error) { throw new Error(`Unable to get currency ${fromCurrency} and ${toCurrency}`); } }; 

Faça o mesmo com a segunda função:

 const getCountries = async (currencyCode) => { try { const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${currencyCode}`); return response.data.map(country => country.name); } catch (error) { throw new Error(`Unable to get countries that use ${currencyCode}`); } }; 

Não há necessidade de verificar se há erros na terceira função, pois ela trabalha com os dados fornecidos pela primeira e pela segunda funções.

Como resultado, podemos chamar a função e obter os dados:

 convertCurrency('USD', 'HRK', 20) .then((message) => { console.log(message); }).catch((error) => { console.log(error.message); }); 

O resultado que você obtém:

Isso é tudo!

Você chegou até o fim! Se algo não der certo no processo, você poderá encontrar o código-fonte neste repositório . Se você tiver alguma dúvida ou quiser deixar um comentário, escreva um comentário . Para mim, a maior ajuda seria o seu apoio no YouTube, porque recentemente criei um canal lá! Clique aqui - em breve muitas coisas interessantes aparecerão aqui! :)

Você também pode assistir ao tutorial que eu criei no site do Mongoose .