‫Kursleiter: Lassen Sie uns
‫nun über eine erstaunliche asynchrone JavaScript-Funktion namens async/await sprechen.
‫Versprechen hat unseren Code also schon viel besser gemacht,
‫aber wir können noch besser werden.
‫Anstatt Versprechungen zu verbrauchen, können wir mit der Methode
‫then, die uns immer noch alle diese Rückruffunktionen verwenden
‫lässt, etwas namens async/await verwenden.
‫Dies ist ein neues Feature, das in ES8 in JavaScript eingeführt
‫wurde und unser Leben viel einfacher machen wird.
‫Wenn wir also Code
‫schreiben, werden wir normalerweise die ganze Zeit Versprechen
‫konsumieren, aber normalerweise nicht so viel produzieren.
‫Async/await macht das viel einfacher.
‫Um nun async/await verwenden
‫zu können, müssen wir eine sogenannte async-Funktion erstellen.
‫Lassen Sie uns diesen Teil also hier auskommentieren, damit
‫wir ihn nicht ganz verlieren, falls Sie ihn
‫hier als Referenz oder so behalten möchten.
‫getDogPic ist also die Funktion, die wir schreiben werden.
‫Und jetzt müssen wir diese Funktion
‫als asynchrone Funktion markieren.
‫Also verwenden wir
‫hier async und erstellen dann die Funktion wie gewohnt.
‫Dieses async-Schlüsselwort hier bedeutet also einfach, dass
‫dies eine spezielle Funktion ist, die asynchron ist.
‫Im Grunde also eine, die im Hintergrund
‫weiterläuft, während der darin enthaltene Code ausgeführt wird,
‫während der Rest des Codes in der Ereignisschleife ausgeführt wird.
‫Diese asynchronen Funktionen werden also asynchron
‫arbeiten, ohne jemals die Ereignisschleife zu blockieren, okay?
‫Diese asynchrone Funktion gibt auch automatisch
‫ein Promise zurück.
‫Aber dazu etwas später in diesem Video mehr.
‫Im Moment ist es wirklich
‫wichtig zu wissen, dass wir in einer asynchronen Funktion immer
‫einen oder mehrere Wait-Ausdrücke haben können,
‫und so funktionieren sie.
‫Also verwenden wir hier await und dann das Promise.
‫Fangen wir also damit an, okay?
‫Und dann können wir das Ergebnis davon in einer Variablen speichern.
‫In diesem Fall Daten.
‫Okay, und das hier wird dann dasselbe sein, als
‫ob Sie dieses Stück Code haben.
‫Schauen wir uns also an, was hier passiert.
‫Dieses Warten hier wird also im Grunde
‫die Ausführung des Codes an dieser Stelle stoppen, bis dieses Versprechen gelöst ist.
‫Wenn nun das Promise erfüllt
‫ist, was sich daran erinnert, dass
‫es erfolgreich war, dann
‫ist der Wert des Wait-Ausdrucks der aufgelöste
‫Wert des Promise, der dann schließlich der Datenvariablen zugewiesen wird, okay?
‫Anstatt also das Promise und dann die
‫Methode then darauf zu
‫haben, die dann die Daten als Argument erhält.
‫Mit async/await ist es viel einfacher.
‫Alles, was wir tun, ist, den Code hier im Grunde daran zu
‫hindern, bei diesem Versprechen zu laufen, zu warten,
‫bis er mit seinem Wert zurückkommt, und diesen Wert dann in einer Variablen zu speichern.
‫Und so ist der Code
‫noch einfacher zu verstehen als zuvor.
‫Und das ist der
‫springende Punkt von async/await: Es soll unseren Code eher
‫wie synchronen Code aussehen lassen, während er
‫hinter den Kulissen tatsächlich noch asynchron ist, okay?
‫Also lass uns damit weitermachen und einfach die Teile aus
‫diesem Beispiel vorher in das neue kopieren, okay?
‫Vorher hatten wir also unser Versprechen, dann unseren damaligen Handler und dann haben
‫wir die Daten auf der Konsole protokolliert.
‫Genau das haben wir
‫also hier, nur auf eine andere Art und Weise.
‫Wir bekommen also unsere Daten in die Variable
‫gespeichert und protokollieren sie dann hier.
‫Als nächstes holen wir uns dann das Hundebild von der API.
‫Wir haben also die res-Variable, also wird das diese sein.
‫Also wieder das Ergebnis des Then-Handlers
‫und wir warten hier auf dieses Versprechen, um mit den Daten zurückzukommen.
‫Ich hoffe, das macht jetzt Sinn.
‫Danach protokollieren wir dies in der Konsole, also
‫das Ergebnis dieses API-Aufrufs.
‫Und schließlich verwenden wir unser letztes Versprechen,
‫um diesen String in eine Datei zu schreiben.
‫Das ist also dieses Versprechen
‫hier, und dieses löst keinen sinnvollen Wert auf.
‫Wir müssen also nicht einmal etwas in einer Variablen speichern.
‫Alles, was wir tun, ist, den
‫Code hier zu stoppen, bis dieser Schreibprozess abgeschlossen ist.
‫Und dann loggen Sie diese Zeichenfolge in
‫die Konsole ein.
‫Wenn Sie also diesen Code mit dem vergleichen, was wir
‫vorher hatten, sieht das viel
‫sauberer und viel einfacher zu verstehen aus, nicht wahr?
‫Damit dies funktioniert,
‫müssen wir nur diese Funktion hier aufrufen.
‫Speichern Sie es und tatsächlich funktioniert es immer noch.
‫Wir bekommen also immer noch unser Ergebnis.
‫Es funktioniert immer noch alles gleich.
‫Das ist also erstaunlich, oder?
‫Nur eine letzte Sache, die wir hier
‫tun müssen, ist unsere Fehlerbehandlung.
‫Denn im Moment behandeln wir nirgendwo Fehler, oder?
‫Also hier unten haben wir die Fangmethode
‫verwendet, aber im Moment
‫können wir das nirgendwo richtig anbringen, oder?
‫Stattdessen verwenden
‫wir hier etwas namens Try-Catch.
‫Und eigentlich hat das nichts mit async/await zu
‫tun, es ist eine Standard-JavaScript-Funktion.
‫Also lass mich dir zeigen, wie es funktioniert.
‫Also packen wir im Grunde unseren gesamten Code in einen try-Block.
‫Im Grunde wird der
‫Code also versuchen, alles auszuführen, was hier drin ist.
‫Und dann brauchen wir auch noch einen catch-Block,
‫der Zugriff auf einen Fehler hat, falls einer vorhanden ist.
‫Wenn also in diesem Block hier ein Fehler auftritt,
‫wird dieser Block sofort
‫verlassen, dieser Try-Block hier, also dieser.
‫Gehen Sie sofort in den catch-Block und geben
‫Sie uns Zugriff auf den Fehler,
‫der im try-Block aufgetreten ist.
‫Jetzt müssen wir nur noch dieses Stück Code für
‫dieses Konsolenprotokoll nehmen, es hier
‫ablegen, es speichern und jetzt funktioniert es.
‫Um jetzt einen
‫Fehler zu verursachen, ändern wir diesen hier noch einmal.
‫Und tatsächlich konnte ich diese Datei nicht finden.
‫Also dieses Versprechen hier abgelehnt, oder?
‫Also dieses Versprechen, es wurde abgelehnt und es gab einen
‫Fehler und es kam sofort in den Catch-Block und hat diesen
‫Fehler dann in der Konsole protokolliert.
‫Leg es zurück.
‫Und jetzt funktioniert es tatsächlich wieder.
‫Okay, so funktioniert async/await.
‫Denken Sie also daran, dass wir await nur verwenden können,
‫wenn es sich in einer asynchronen Funktion befindet.
‫Aus diesem Grund wird es immer zusammen aufgerufen, also
‫warten Sie immer auf einen asynchronen Schrägstrich.
‫Denn diese beiden Eigenschaften gehören eng zusammen.
‫Um es kurz
‫zusammenzufassen: async/await ermöglicht es uns, anstatt
‫all diese Then-Handler mit
‫diesen Callback-Funktionen darin zu haben.
‫Es ermöglicht uns, unseren Code synchroner aussehen zu lassen.
‫Alles, was wir tun, ist, das Schlüsselwort await vor
‫unserem Versprechen zu verwenden.
‫Und dann wird es warten, bis dieses
‫Versprechen mit seinem Ergebnis zurückkommt.
‫Denken Sie daran, dass dies
‫das ist, was wir syntaktischen Zucker für Versprechen nennen.
‫Es lässt Versprechen also einfach schöner aussehen, aber hinter den
‫Kulissen funktioniert immer noch alles gleich mit der
‫Versprechen-Logik, die ich Ihnen zuvor erklärt habe.
‫Dies wiederum dient nur dazu, unser
‫Leben beim Codieren etwas einfacher zu machen und unseren
‫Code ein bisschen mehr wie synchroner Code aussehen zu lassen.
‫So implementieren wir async/await.
‫Im nächsten Video
‫erfahren wir etwas mehr darüber, wie Async-Funktionen tatsächlich funktionieren.