Wie man die asynchrone / wartende Syntax beherrscht: ein echtes Beispiel

Hier ist eine Übersetzung eines Artikels von Adrian Hajdin, der auf der freeCodeCamp-Website veröffentlicht wurde. Unter der Katze erklärt der Autor den Vorteil von async / await klar und prägnant und zeigt anhand eines konkreten Beispiels, wie diese Syntax verwendet wird.



Hinweis ...

Ich habe nicht nur diesen Artikel geschrieben, sondern auch ein Video auf YouTube erstellt!

Sie können den Anweisungen im Video und im Programm folgen, während Sie sie ansehen. Ich rate Ihnen, zuerst den Artikel zu lesen und erst dann während des Videos Code zu schreiben.

Videolink : Lernen Sie Async / Await in diesem realen Projekt

Einführung

Async / await ist eine neue Methode zum Schreiben von asynchronem Code. Diese Syntax basiert auf Versprechungen und blockiert daher nicht.

Der Unterschied zu anderen Methoden zum Erstellen von asynchronem Code besteht darin, dass asynchroner Code, der über async / await implementiert wird, in Aussehen und Verhalten dem synchronen Code ähnelt. Und das ist sein Vorteil.

Bisherige Methoden zum Organisieren von asynchronem Code waren Rückrufe und Versprechen.

Rückruffunktionen in Aktion

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

Das Problem der Rückruffunktion - Die berüchtigte Rückrufhölle

Wenn Sie Rückruffunktionen aneinander anhängen, sieht der Code bald folgendermaßen aus:


Rückruf Hölle

Rückruf Hölle

Dies ist eine Situation, in der Rückrufe auf mehreren Ebenen in andere Rückrufe eingebettet sind, was das Verstehen und Verwalten von Code erschwert.

Versprechen in Aktion

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

versprechenFunktion gibt ein Versprechen zurück , das den Prozess dieser Funktion darstellt. Durch die Auflösungsfunktion wird dem Promise- Objekt klar, dass der Vorgang abgeschlossen ist.

Dann können wir .then () und .catch () für diese Versprechen-Funktion aufrufen :
dann - startet den Rückruf, den Sie übergeben, wenn das Versprechen erfüllt ist.
catch - Startet den Rückruf, den Sie übergeben, wenn ein Fehler aufgetreten ist.

Asynchrone Funktionen

Die asynchronen Funktionen bieten uns eine saubere und präzise Syntax , mit der wir weniger Code schreiben und das gleiche Ergebnis erzielen können wie mit Versprechungen. Async ist nichts anderes als syntaktischer Zucker für Versprechen.

Asynchrone Funktionen werden erstellt, indem das Schlüsselwort async vor der Funktionsdeklaration hinzugefügt wird. Beispiel:

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

Asynchrone Funktionen können mit await angehalten werden, einem Schlüsselwort, das nur innerhalb der asynchronen Funktion verwendet wird . Await gibt alles zurück, was die asynchrone Funktion zurückgibt, wenn sie ausgeführt wird.

Der Unterschied zwischen Versprechen und Async / Warten:

 // 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 ist wie synchroner Code, der viel einfacher zu verstehen ist.

Nachdem wir uns nun mit den Grundprinzipien befasst haben, gehen wir zu einem realen Anwendungsfall über!

Währungsumrechner

Projektklärung und Anpassung

Jetzt erstellen wir eine einfache, aber nützliche Anwendung (auch für Schulungen), die Ihr Allgemeinwissen über Async / Warten verbessert.

Das Programm verwendet den Geldbetrag, den Währungscode, von dem wir diesen Betrag überweisen möchten, und den Währungscode, in den wir ihn überweisen möchten. Das Programm gibt dann den korrekten Wechselkurs basierend auf den Daten der API aus.

In dieser Anwendung werden Daten aus zwei asynchronen Quellen abgerufen:

1. Währungsschicht - https://currencylayer.com - Sie müssen sich kostenlos registrieren, um den API-Zugriffsschlüssel verwenden zu können. Er wird uns die zur Berechnung des Wechselkurses erforderlichen Daten zur Verfügung stellen.
2. Restländer - http://restcountries.eu/ - Diese API bietet Informationen darüber, wo wir die Währung verwenden können, in die wir gerade unser Geld überwiesen haben.

Erstellen Sie zunächst einen neuen Ordner und führen Sie npm init , überspringen Sie alle Schritte und installieren Sie axios, indem Sie npm i -- save axios . Erstellen Sie eine neue Datei mit dem Namen currency-converter.js .

Fordern Sie zuerst Axios an, indem Sie Folgendes eingeben: const axios = require('axios');

Lassen Sie uns in Async / Warten eintauchen

Unser Ziel ist es, dass das Programm drei Funktionen hat. Nicht eine oder zwei, sondern drei asynchrone Funktionen . Die erste Funktion empfängt Daten zu Währungen, die zweite - über Länder und die dritte -, um diese Informationen an einem Ort zu sammeln und dem Benutzer in geordneter Weise anzuzeigen.

Die erste Funktion ist der asynchrone Empfang von Währungsdaten

Wir werden eine asynchrone Funktion erstellen, die zwei Argumente enthält - fromCurrency und toCurrency.

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

Jetzt müssen Sie die Daten erhalten. Mit async / await können Sie einer Variablen Daten direkt zuweisen. Vergessen Sie nicht, sich zu registrieren und Ihren Passkey einzugeben.

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

Die Daten aus der Antwort sind in response.data.rates verfügbar, sodass Sie diesen Ausdruck in eine Variable direkt unter der Antwort einfügen können:

 const rate = response.data.rates; 

Da alles in Euro umgerechnet wird, erstellen wir unten eine Variable namens Euro, die 1 / der Währung entspricht, von der wir Geld überweisen möchten:

 const euro = 1 / rate[fromCurrency]; 

Und um den Wechselkurs zu erhalten, müssen Sie den Euro mit der Währung multiplizieren, in die wir Geld überweisen möchten:

 const exchangeRate = euro * rate[toCurrency]; 

Infolgedessen sollte die Funktion ungefähr so ​​aussehen:



Die zweite Funktion ist die asynchrone Erfassung von Daten über das Land.

Wir werden eine asynchrone Funktion erstellen, die CurrencyCode als Argument verwendet:

 const getCountries = async (currencyCode) => {} 

Wie beim letzten Mal werden wir die Daten abrufen und einer Variablen zuweisen:

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

Dann werden wir die Daten country.name und country.name für jeden Währungscode zurückgeben:

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

Infolgedessen sollte die Funktion ungefähr so ​​aussehen:



Die dritte und letzte Funktion - wir kombinieren alles miteinander
Wir werden eine asynchrone Funktion erstellen, die fromCurrency , toCurrency und die Summe als Argumente enthält:

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

Zuerst erhalten wir die Währungsdaten:

 const exchangeRate = await getExchangeRate(fromCurrency, toCurrency); 

Dann Länderdaten:

 const countries = await getCountries(toCurrency); 

Speichern Sie danach den umgerechneten Betrag in einer Variablen:

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

Infolgedessen zeigen wir dem Benutzer all dies an:

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

Zusammen sollte es so aussehen:



Hinzufügen einer try / catch-Anweisung zur Behandlung von Fehlern
Wir müssen unsere Logik mit einem try / catch-Block umschließen, um etwaige Fehler abzufangen:

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

Machen Sie dasselbe mit der zweiten Funktion:

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

Die dritte Funktion muss nicht auf Fehler überprüft werden, da sie mit den Daten arbeitet, die die erste und die zweite Funktion für sie bereitstellen.

Als Ergebnis können wir die Funktion aufrufen und die Daten abrufen:

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

Das Ergebnis erhalten Sie:

Das ist alles!

Du bist den ganzen Weg bis zum Ende gekommen! Wenn dabei etwas nicht geklappt hat, finden Sie den Quellcode in diesem Repository . Wenn Sie Fragen haben oder eine Bewertung abgeben möchten, schreiben Sie einen Kommentar . Für mich wäre die größte Hilfe Ihre Unterstützung auf YouTube, da ich dort erst kürzlich einen Kanal erstellt habe! Klicken Sie hier - bald werden hier viele interessante Dinge erscheinen! :) :)

Sie können sich auch das Tutorial ansehen, das ich auf der Mongoose- Website erstellt habe.