Comment maîtriser la syntaxe asynchrone / wait: un exemple réel

Voici une traduction d'un article d'Adrian Hajdin, qui a été publié sur le site web freeCodeCamp. Sous la coupe, l'auteur explique clairement et succinctement l'avantage de l'async / wait et montre sur un exemple concret comment utiliser cette syntaxe.



Remarque ...

J'ai non seulement écrit cet article, mais aussi créé une vidéo sur YouTube!

Vous pouvez suivre les instructions de la vidéo et du programme pendant la visualisation. Je vous conseille de lire d'abord l'article et ensuite d'écrire du code pendant la vidéo.

Lien vidéo: Apprenez Async / Attendez dans ce projet du monde réel

Présentation

Async / Wait est une nouvelle façon d'écrire du code asynchrone. Cette syntaxe est construite au-dessus des promesses et n'est donc pas bloquante.

La différence avec les autres méthodes de création de code asynchrone est qu'en apparence et en comportement, le code asynchrone implémenté via async / wait ressemble au code synchrone. Et c'est son avantage.

Les méthodes précédentes pour organiser le code asynchrone étaient des rappels et des promesses.

Fonctions de rappel en action

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

Le problème de la fonction de rappel - L'enfer notoire du rappel

Lorsque vous associez des fonctions de rappel, le code commence bientôt à ressembler à ceci:


Enfer de rappel

Enfer de rappel

Il s'agit d'une situation dans laquelle les rappels sont intégrés dans d'autres rappels à plusieurs niveaux, ce qui rend difficile la compréhension et la gestion du code.

Des promesses en action

 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 renvoie une promesse qui représente le processus de cette fonction. La fonction de résolution permet à l'objet Promise de comprendre que le processus est terminé.

Ensuite, nous pouvons appeler .then () et .catch () pour cette fonction de promesse:
puis - lance le rappel que vous passez lorsque la promesse est terminée.
catch - lance le rappel que vous passez en cas de problème.

Fonctions asynchrones

Les fonctions asynchrones nous fournissent une syntaxe propre et concise qui nous permet d'écrire moins de code et d'obtenir le même résultat que l'utilisation de promesses. Async n'est rien d'autre que du sucre syntaxique pour les promesses.

Les fonctions asynchrones sont créées en ajoutant le mot clé async avant la déclaration de fonction, par exemple:

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

Les fonctions asynchrones peuvent être suspendues avec wait , un mot-clé utilisé uniquement dans la fonction asynchrone . Await renvoie tout ce que la fonction async retourne lorsqu'elle est exécutée.

La différence entre les promesses et l'async / attendent:

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

L'async / attente est comme le code synchrone, qui est beaucoup plus facile à comprendre.

Maintenant que nous avons couvert les principes de base, passons à un cas d'utilisation réel!

Convertisseur de devises

Clarification et personnalisation du projet

Nous allons maintenant créer une application simple mais utile (y compris pour la formation) qui améliorera vos connaissances générales sur async / wait .

Le programme prendra le montant d'argent, le code de devise à partir duquel nous voulons transférer ce montant et le code de devise dans lequel nous voulons le transférer. Le programme émettra ensuite le taux de change correct en fonction des données de l'API.

Dans cette application, nous allons obtenir des données de deux sources asynchrones:

1. Currency Layer - https://currencylayer.com - vous devrez vous inscrire gratuitement pour utiliser la clé d'accès API. Il nous fournira les données nécessaires au calcul du taux de change.
2. Pays de repos - http://restcountries.eu/ - cette API fournira des informations sur les endroits où nous pouvons utiliser la devise dans laquelle nous venons de transférer notre argent.

Tout d'abord, créez un nouveau dossier et exécutez npm init , ignorez toutes les étapes et installez axios en tapant npm i -- save axios . Créez un nouveau fichier appelé currency-converter.js .

Demandez d'abord axios en tapant: const axios = require('axios');

Plongeons-nous dans async / wait

Notre objectif est que le programme ait trois fonctions. Pas une ou deux, mais trois fonctions asynchrones . La première fonction recevra des données sur les devises, la seconde - sur les pays, et la troisième - pour collecter ces informations en un seul endroit et les afficher à l'utilisateur de manière ordonnée.

La première fonction est la réception asynchrone des données monétaires

Nous allons créer une fonction asynchrone qui comprendra deux arguments - fromCurrency et toCurrency.

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

Vous devez maintenant obtenir les données. En utilisant async / wait, vous pouvez affecter des données directement à une variable. N'oubliez pas de vous inscrire et de saisir votre mot de passe.

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

Les données de la réponse sont disponibles dans response.data.rates , vous pouvez donc insérer cette expression dans une variable directement sous la réponse:

 const rate = response.data.rates; 

Puisque tout est converti à partir de l'euro, ci-dessous, nous allons créer une variable appelée euro, qui sera égale à 1 / de la devise à partir de laquelle nous voulons transférer de l'argent:

 const euro = 1 / rate[fromCurrency]; 

Et pour obtenir le taux de change, vous devez multiplier l'euro par la devise dans laquelle nous voulons transférer de l'argent:

 const exchangeRate = euro * rate[toCurrency]; 

Par conséquent, la fonction devrait ressembler à ceci:



La deuxième fonction est l'acquisition asynchrone de données sur le pays.

Nous allons créer une fonction asynchrone qui utilisera currencyCode comme argument:

 const getCountries = async (currencyCode) => {} 

Comme la dernière fois, nous allons récupérer les données et les affecter à une variable:

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

Ensuite, nous associerons les données et retournerons country.name pour chaque code de devise:

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

Par conséquent, la fonction devrait ressembler à ceci:



La troisième et dernière fonction - nous combinons tout ensemble
Nous allons créer une fonction asynchrone qui inclura fromCurrency , toCurrency et la somme comme arguments:

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

Nous obtenons d'abord les données sur les devises:

 const exchangeRate = await getExchangeRate(fromCurrency, toCurrency); 

Puis les données par pays:

 const countries = await getCountries(toCurrency); 

Après cela, enregistrez le montant converti dans une variable:

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

En conséquence, nous affichons tout cela à l'utilisateur:

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

Ensemble, cela devrait ressembler à ceci:



Ajout d'une instruction try / catch pour gérer les erreurs
Nous devons encapsuler notre logique avec un bloc try / catch pour détecter les erreurs, le cas échéant:

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

Faites de même avec la deuxième fonction:

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

Il n'est pas nécessaire de vérifier la troisième fonction pour les erreurs, car elle fonctionne avec les données que les première et deuxième fonctions lui fournissent.

En conséquence, nous pouvons appeler la fonction et obtenir les données:

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

Le résultat que vous obtenez:

C'est tout!

Vous êtes arrivé jusqu'au bout! Si quelque chose n'a pas fonctionné dans le processus, vous pouvez trouver le code source dans ce référentiel . Si vous avez des questions ou souhaitez laisser un avis, écrivez un commentaire . La plus grande aide pour moi serait votre soutien sur YouTube, car je viens de créer une chaîne là-bas! Cliquez ici - bientôt beaucoup de choses intéressantes apparaîtront ici! :)

Vous pouvez également regarder le tutoriel que j'ai créé sur le site Web Mongoose .