Cómo dominar la sintaxis async / await: un ejemplo real

Aquí hay una traducción de un artículo de Adrian Hajdin, que se publicó en el sitio web freeCodeCamp. Debajo del corte, el autor explica clara y sucintamente la ventaja de async / await, y muestra con un ejemplo concreto cómo usar esta sintaxis.



Nota ...

¡No solo escribí este artículo, sino que también creé un video en YouTube!

Puede seguir las instrucciones en el video y el programa mientras lo ve. Le aconsejo que primero lea el artículo y solo luego escriba el código durante el video.

Enlace de video: Aprenda Async / Aguarde en este proyecto del mundo real

Introduccion

Async / await es una nueva forma de escribir código asincrónico. Esta sintaxis se basa en promesas y, por lo tanto, no está bloqueando.

La diferencia con otros métodos para crear código asincrónico es que, en apariencia y comportamiento, el código asincrónico que se implementa a través de async / await se asemeja a un código síncrono. Y esta es su ventaja.

Los métodos anteriores para organizar el código asincrónico eran devoluciones de llamada y promesas.

Funciones de devolución de llamada en acción

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

El problema de la función de devolución de llamada - El notorio infierno de devolución de llamada

Cuando adjunta funciones de devolución de llamada entre sí, el código pronto comienza a verse así:


Callback Hell

Callback hell

Esta es una situación en la que las devoluciones de llamada están integradas en otras devoluciones de llamada en varios niveles, lo que dificulta la comprensión y la administración del código.

Promesas en acción

 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); }); 

promiseFunction devuelve una promesa que representa el proceso de esta función. La función de resolución hace que el objeto Promise entienda que el proceso está completo.

Entonces podemos llamar a .then () y .catch () para esta función de promesa:
luego : inicia la devolución de llamada que pasa cuando se completa la promesa.
catch : inicia la devolución de llamada que pasa cuando algo sale mal.

Funciones asincrónicas

Las funciones asíncronas nos proporcionan una sintaxis limpia y concisa que nos permite escribir menos código y obtener el mismo resultado que usar promesas. Async no es más que azúcar sintáctica para promesas.

Las funciones asincrónicas se crean agregando la palabra clave asincrónica antes de la declaración de la función, por ejemplo:

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

Las funciones asincrónicas se pueden pausar con wait , una palabra clave que se usa solo dentro de la función asincrónica . Await devuelve todo lo que la función asíncrona devuelve cuando se ejecuta.

La diferencia entre promesas y así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)); 

Async / await es como un código síncrono, que es mucho más fácil de entender.

Ahora que hemos cubierto los principios básicos, pasemos a un caso de uso real.

Conversor de divisas

Proyecto de aclaración y personalización

Ahora crearemos una aplicación simple pero útil (incluida la capacitación) que mejorará su conocimiento general de async / wait .

El programa tomará la cantidad de dinero, el código de moneda desde el que queremos transferir esta cantidad y el código de moneda a la que queremos transferirlo. Luego, el programa emitirá el tipo de cambio correcto en función de los datos de la API.

En esta aplicación, vamos a obtener datos de dos fuentes asíncronas:

1. Capa de moneda : https://currencylayer.com : deberá registrarse de forma gratuita para usar la clave de acceso API. Nos proporcionará los datos necesarios para calcular el tipo de cambio.
2. Resto de países - http://restcountries.eu/ - esta API proporcionará información sobre dónde podemos usar la moneda a la que acabamos de transferir nuestro dinero.

En primer lugar, cree una nueva carpeta y ejecute npm init , omita todos los pasos e instale axios escribiendo npm i -- save axios . Cree un nuevo archivo llamado currency-converter.js .

Primero solicite axios escribiendo: const axios = require('axios');

Vamos a sumergirnos en asíncrono / esperar

Nuestro objetivo es que el programa tenga tres funciones. No una o dos, sino tres funciones asincrónicas . La primera función recibirá datos sobre monedas, la segunda, sobre países, y la tercera, para recopilar esta información en un lugar y mostrarla al usuario de manera ordenada.

La primera función es la recepción asincrónica de datos monetarios.

Crearemos una función asincrónica que incluirá dos argumentos: fromCurrency y toCurrency.

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

Ahora necesita obtener los datos. Usando async / await, puede asignar datos directamente a una variable. No olvides registrarte e ingresar tu clave de acceso.

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

Los datos de la respuesta están disponibles en response.data.rates , por lo que puede insertar esta expresión en una variable directamente debajo de la respuesta:

 const rate = response.data.rates; 

Como todo se convierte de euros, a continuación crearemos una variable llamada euro, que será igual a 1 / de la moneda desde la que queremos transferir dinero:

 const euro = 1 / rate[fromCurrency]; 

Y para obtener el tipo de cambio, debe multiplicar el euro por la moneda a la que queremos transferir dinero:

 const exchangeRate = euro * rate[toCurrency]; 

Como resultado, la función debería verse así:



La segunda función es la adquisición asincrónica de datos sobre el país.

Crearemos una función asincrónica que utilizará currencyCode como argumento:

 const getCountries = async (currencyCode) => {} 

Como la última vez, vamos a obtener los datos y asignarlos a una variable:

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

Luego, haremos coincidir los datos y devolveremos country.name para cada código de moneda:

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

Como resultado, la función debería verse así:



La tercera y última función: combinamos todo
Crearemos una función asincrónica que incluirá fromCurrency , toCurrency y la suma como argumentos:

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

Primero obtenemos los datos de la moneda:

 const exchangeRate = await getExchangeRate(fromCurrency, toCurrency); 

Luego datos del país:

 const countries = await getCountries(toCurrency); 

Después de eso, guarde la cantidad convertida en una variable:

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

Como resultado, mostramos todo esto al usuario:

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

Juntos, debería verse así:



Agregar una declaración try / catch para manejar errores
Necesitamos ajustar nuestra lógica con un bloque try / catch para detectar errores, si los hay:

 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}`); } }; 

Haz lo mismo con la segunda función:

 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}`); } }; 

No es necesario verificar si hay errores en la tercera función, ya que funciona con los datos que le proporcionan las funciones primera y segunda.

Como resultado, podemos llamar a la función y obtener los datos:

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

El resultado que obtienes:

Eso es todo!

¡Has llegado hasta el final! Si algo no funcionó en el proceso, puede encontrar el código fuente en este repositorio . Si tiene preguntas o desea dejar un comentario, escriba un comentario . Para mí, la mayor ayuda sería su apoyo en YouTube, ¡porque hace poco creé un canal allí! Haga clic aquí . ¡Pronto aparecerán muchas cosas interesantes! :)

También puedes ver el tutorial que creé en el sitio web de Mongoose .