Como dominar async / aguardar com este exemplo do mundo real

Adrian Hajdin Blocked Unblock Seguir Seguindo 8 de janeiro ES7 – Async / Await

Índice:

  1. Introdução (callbacks, promises, async / await)
  2. Exemplo do mundo real – Conversor de Moedas que está recebendo dados assíncronos de duas APIs.

Apenas uma nota…

Além de escrever este artigo, também criei um vídeo do YouTube!
Você pode acompanhar e codificar enquanto assiste. Eu aconselho você a ler primeiro o artigo e depois codificar junto com o vídeo.

Link do vídeo: Aprenda Async / Aguarde neste Projeto Real World

Introdução

Async / await é uma nova maneira de escrever código assíncrono. Ele é construído sobre as promessas, portanto, também é não bloqueador.

A grande diferença é que o código assíncrono se parece e se comporta um pouco mais como um código síncrono. Este é o lugar onde todo o seu poder está.

Opções anteriores para código assíncrono eram retornos de chamada e promessas .

Callbacks em ação

 setTimeout (() => { 
console.log ('Isso é executado após 1000 milissegundos.');
}, 1000);

Problema com retornos de chamada o infame Callback Hell

Os retornos de chamada de aninhamento nos retornos de chamada logo começarão a ficar assim:

Inferno de retorno de chamada

Inferno de retorno de chamada

A situação em que os retornos de chamada estão aninhados em outros callbacks em vários níveis, dificultando potencialmente a compreensão e a manutenção do código.

Promessas em ação

 const promiseFunction = new Promise ((resolver, rejeitar) => { 
const add = (a, b) => a + b;
 resolver (adicionar (2, 2)); 
});
 promiseFunction.then ((resposta) => { 
console.log (resposta);
}). catch ((erro) => {
console.log (erro);
});

O promiseFunction retorna um Promise que representa o processo dessa função. A função de resolução indica à instância do Promise que terminou.

Depois disso, podemos chamar .then () e .catch () nessa função de promessa:
então – Executa um callback que você passa quando a promessa termina.
catch – Executa um callback que você passa quando algo deu errado.

Funções Assíncronas

A função assíncrona nos fornece uma sintaxe limpa e concisa que nos permite escrever menos código para realizar o mesmo resultado que obteríamos com promessas. Assíncrono nada mais é do que açúcar sintático para promessas.

As funções assíncronas são criadas com a inclusão da palavra assíncrona antes da declaração de função como esta:

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

As funções assíncronas podem ser pausadas com aguardar , a palavra-chave que só pode ser usada dentro de uma função assíncrona . Aguardar retorna o que quer que a função assíncrona retorna quando é feito.

Esta é a diferença entre promessas e async / await:

 // Async / Await 
const asyncGreeting = async () => 'Saudações';
 // Promessas 
const promiseGreeting = () => novo Promise (((resolver) => {
resolver ('Saudações');
}));
 asyncGreeting (). then (result => console.log (resultado)); 
promiseGreeting (). then (resultado => console.log (resultado));

Async / Await parece semelhante ao código síncrono, e o código síncrono é muito mais fácil de entender.

Agora que cobrimos o básico, vamos ao nosso exemplo do mundo real!

Conversor de moeda

Clarificação e configuração do projeto

Neste tutorial, criaremos um aplicativo simples, mas educativo e útil, que melhorará seu conhecimento geral do Async / Await.

O programa terá o código da moeda que queremos converter e o código da moeda que queremos converter, bem como a quantidade de dinheiro. Posteriormente, o programa produzirá a taxa de câmbio correta com base nos dados das APIs.

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

  1. Camada de moedahttps://currencylayer.com – Você precisa se inscrever gratuitamente para poder usar a chave de acesso da API. Essa API nos fornecerá os dados necessários para calcular a taxa de câmbio entre as moedas.
  2. Rest Countrieshttp://restcountries.eu/ – Esta API nos dará informações sobre onde podemos usar a moeda que acabamos de converter nosso dinheiro.

Para iniciantes, crie um novo diretório e execute npm init , pule todas as etapas e instale os axios digitando npm i --save axios. Crie um novo arquivo chamado currency-converter.js.

Primeiramente, exija axios digitando: const axios = require('axios');

Vamos mergulhar no async / await

Nosso objetivo para este programa é ter três funções. Não uma, não duas, mas três funções assíncronas. A primeira função é buscar dados sobre moedas. A segunda função, se for buscar dados sobre os países. E a terceira função é coletar essas informações em um único lugar e gerá-las bem para o usuário.

Primeira função – Recebendo dados de moeda de forma assíncrona

Vamos criar uma função assíncrona que receberá dois argumentos, fromCurrency e toCurrency.

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

Agora precisamos buscar os dados. Com async / wait, podemos atribuir dados diretamente a uma variável; não se esqueça de se inscrever e digitar sua própria chave de acesso correta.

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

Os dados da resposta estão disponíveis em response.data.rates para que possamos colocar isso em uma variável logo abaixo da resposta:

 taxa const = response.data.rates; 

Como tudo está sendo convertido do euro, abaixo, criaremos uma variável chamada euro, que será igual a 1 / moeda da qual queremos converter:

 const euro = 1 / taxa [fromCurrency]; 

Finalmente, para obter uma taxa de câmbio, podemos multiplicar euros pela moeda que queremos converter:

 const exchangeRate = euro * taxa [toCurrency]; 

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

Segunda função – Recebendo dados do país de forma assíncrona

Vamos criar uma função assíncrona que vai usar o currencyCode como argumento:

 const getCountries = assíncrono ( currencyCode ) => {} 

Como vimos antes, vamos buscar dados e atribuí-los a uma variável:

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

Vamos mapear os dados e retornar country.name para cada um:

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

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

Terceira e última função – unindo tudo

Vamos criar uma função assíncrona que vai levar fromCurrency , toCurrency e amount como argumentos:

 const convert = assíncrono ( fromCurrency , toCurrency , amount ) => {} 

Primeiro, obtemos os dados da moeda:

 const exchangeRate = espera getExchangeRate (fromCurrency, toCurrency); 

Em segundo lugar, obtemos os dados dos países:

 const countries = aguarda getCountries (toCurrency); 

Em terceiro lugar, salvamos o valor convertido em uma variável:

 const convertAmount = (quantidade * exchangeRate) .toFixed (2); 

Finalmente, nós enviamos tudo para o usuário:

 return $ {amount} $ {fromCurrency} vale $ {convertedAmount} $ {toCurrency}. Você pode gastá-los nos seguintes países: $ {countries} `; 

Tudo isso junto deve ficar assim:

Adicionando try / catch para lidar com casos de erro

Precisamos envolver toda a nossa lógica em try e pegar o erro se houver um:

 const getExchangeRate = async (fromCurrency, toCurrency) => { 
experimentar {
const resposta = await axios.get (' http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1' );
 taxa const = response.data.rates; 
const euro = 1 / taxa [fromCurrency];
const exchangeRate = euro * taxa [toCurrency];
 return exchangeRate; 
} pegar (erro) {
throw new Error (`Não é possível obter moeda $ {fromCurrency} e $ {toCurrency}`);
}
};

Repita o mesmo para a segunda função:

 const getCountries = assíncrono (currencyCode) => { 
experimentar {
const resposta = await axios.get (` https://restcountries.eu/rest/v2/currency/$ {currencyCode}` );
 return response.data.map (country => country.name); 
} pegar (erro) {
throw new Error (`Não é possível obter os países que usam $ {currencyCode}`);
}
};

E como a terceira função é apenas trabalhar com o que a primeira e a segunda função forneceram, não há necessidade de verificação de erros.

Finalmente, podemos chamar a função e receber os dados:

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

A saída que você vai receber:

É isso aí!

Você fez todo o caminho até o fim! Se você ficar preso ao longo do caminho, fique à vontade para verificar o código neste repositório . Se você tiver alguma pergunta ou comentário, me avise nos comentários abaixo. O mais útil seria o suporte no YouTube desde que acabei de criar um canal! Clique aqui , há muitas coisas interessantes em breve! 🙂

Você também pode conferir o tutorial que fiz no Mongoose .

Texto original em inglês.