‫Kursleiter: Sie
‫haben also bereits gelernt, wie
‫man Async/Await verwendet, aber es gibt
‫noch ein bisschen mehr darüber, wie Async-Funktionen tatsächlich funktionieren.
‫Also machen wir das jetzt.
‫Um etwas besser zu verstehen, was hier passiert, versuchen wir
‫einfach, eine Konsole hinzuzufügen. Protokolle nach und
‫vor dem Aufrufen von Async-Funktionen hier.
‫Okay, also tröste.
‫log Also Schritt
‫eins wird Hundebilder
‫bekommen, okay.
‫Und dann Nummer zwei.
‫Sagen
‫wir mal, fertig mit den Hundebildern.
‫Okay. Also lassen Sie es uns sparen.
‫Und was ist hier passiert?
‫Wir haben diese beiden Konsolen. logs vor
‫allen Protokollen, die von der Async-Funktion stammen.
‫Wir haben also die eins, zwei für
‫diese und diese und
‫erst danach haben wir die
‫Protokolle, die aus dem Hundebild stammen.
‫Das haben Sie erwartet?
‫Wenn nicht, analysieren wir, was hier passiert ist.
‫Nun, wie ich Ihnen bereits sagte, wird diese
‫Async-Funktion tatsächlich im Hintergrund ausgeführt.
‫Denn so sollen sich Async-Funktionen
‫einfach verhalten.
‫Stimmt, das macht total Sinn?
‫Wir können den Code hier also nicht einfach stoppen.
‫Sobald wir diese Funktion treffen,
‫können wir die Ausführung unseres Hauptthreads hier nicht einfach stoppen.
‫Richtig?
‫Und das ist die ganze Philosophie, das Ereignisprotokoll
‫nicht zu blockieren.
‫Wir müssen also einige Hundebilder von der API abrufen,
‫aber das ist keine Entschuldigung, die Ausführung über Code zu stoppen.
‫Also um das Ereignisprotokoll zu blockieren.
‫Als Ergebnis, wenn die Java-Skript-Engine eingestellt wurde, wird
‫diese Codezeile hier einfach die Funktion zum
‫Abrufen von Hunden in den Hintergrund verlagern und
‫direkt zur nächsten Zeile gehen.
‫Also diese zweite Konsole. hier einloggen.
‫Es ist also sinnvoll, dass zuerst dieser String hier protokolliert wird,
‫dann diese Funktion ausgeführt wird,
‫dann sofort diese Codezeile protokolliert wird und in der
‫Zwischenzeit diese Datei im Hintergrund gelesen wird, und sobald
‫das ist bereit, beginnt es
‫mit dem Drucken dieses Protokolls, dieses Protokolls und
‫auch dieses Protokolls.
‫Genau das passiert hier also.
‫Eins zwei und dann noch drei Einsen.
‫Sinn ergeben? Okay.
‫Dann gehen wir noch einen
‫Schritt weiter und geben tatsächlich etwas von unserer Async-Funktion zurück.
‫Also ändere ich dies hier auf drei, damit
‫wir von dieser Funktion einen String zurückgeben
‫können, der zwei sagt, sagen wir fertig und dann fügen wir hier
‫wieder ein Emoji hinzu, damit es
‫in unserer Konsole ein bisschen mehr auftaucht.
‫Also fertig hier.
‫Und dann speichern wir das.
‫Einfach eine Variable, egal was es ist.
‫Und loggen Sie dann x in die Konsole ein.
‫Schauen wir also, was passiert.
‫Und jetzt bekommen wir hier dieses
‫seltsame Versprechen statt der Schnur hier, die wir vielleicht erwartet hatten.
‫Warum ist also x hier und nicht dieser
‫String, sondern dieses Versprechen hier?
‫Erinnern Sie sich, wie ich am Anfang des
‫letzten Videos gesagt habe, dass
‫eine Async-Funktion tatsächlich automatisch ein Versprechen zurückgibt?
‫Nun, das hier ist also der Beweis dafür.
‫Anstatt sich zu diesem Zeitpunkt an der Konsole anzumelden, sagt es
‫uns nur, dass x ein Versprechen ist, das zu
‫diesem Zeitpunkt noch ausgeführt wird und
‫daher noch aussteht.
‫Deshalb heißt es hier ausstehend.
‫Java-Skript kann also natürlich nicht wissen, dass x
‫hier irgendwann dieser fertige String sein wird.
‫Und so geht es einfach weiter zur nächsten Konsole. log, wie
‫wir es zuvor besprochen hatten.
‫Und zu der Zeit, als JavaScript tatsächlich weiß,
‫dass dieses x hier die Belastung sein sollte, die wir zu diesem
‫Zeitpunkt gut zurückgegeben haben, ist die Ausführung
‫dieses Codes hier schon lange abgeschlossen.
‫Aber was sollten wir tun, wenn
‫wir diesen Rückgabewert hier tatsächlich erhalten wollten?
‫Was also, wenn wir diese Zeichenfolge wirklich zurückgeben und
‫über die Konsole protokollieren wollten?
‫Nun, wir müssten diese Async-Funktion als
‫Versprechen behandeln.
‫Also würden wir die
‫DEN-Methode verwenden oder wieder Async/Await verwenden.
‫Lassen Sie mich Ihnen zeigen, wie das geht.
‫Anstatt also zu versuchen, den zurückgegebenen Wert in
‫einer Variablen zu speichern, können wir die DEN-Methode darauf verwenden.
‫Hier können wir es also x nennen.
‫Also trösten. log x also genau wie das, was
‫wir hier hatten, und dann würden wir auch dieses
‫innerhalb des DEN-Griffs machen, okay?
‫Sehen wir uns also an, was wir hier gemacht haben.
‫Holen Sie sich Hundebild also ein Versprechen, erinnern Sie sich daran?
‫Und damit wir ein Versprechen haben, verwenden wir die DEN-Methode, um
‫Zugang zu ihrem zukünftigen Wert zu erhalten.
‫Also der Wert, der schließlich zurückgegeben wird.
‫In diesem Fall sind dies die beiden bereiten Zeichenfolgen.
‫Okay?
‫Wenn Sie also x dazu
‫bringen möchten, müssen wir die DEN-Methode verwenden, wie wir es gerade hier gemacht haben.
‫Und erst danach können wir dann gleich hier
‫den dritten String loggen.
‫Wenn wir es jetzt
‫so speichern, sollte es wie erwartet funktionieren.
‫Und ja, das tut es.
‫Wir haben also unser erstes Protokoll, dann alle
‫Protokolle, die von unserer Async-Funktion kommen, und dann das
‫fertige von Zeile 42 hier.
‫Und schließlich die Nummer 3. Perfekt.
‫Und ich hoffe, es macht für Sie vollkommen Sinn.
‫Was passiert nun, wenn tatsächlich ein Fehler aufgetreten ist?
‫Nun, das ist etwas schwieriger zu handhaben.
‫Also lassen Sie uns noch einmal einen Fehler verursachen, wie wir es zuvor getan haben.
‫Aber Sie sehen, dass wir hier eigentlich immer noch
‫die DEN-Methode eingeben.
‫Also dieser Block hier, okay.
‫Selbst wenn hier in diesem Versprechen ein Fehler aufgetreten ist, wird es
‫im Grunde immer noch als erfolgreiches Versprechen aufgelöst.
‫Es gibt diesen Wert also immer noch hier zurück.
‫Und selbst wenn wir unseren Catch-Handler hier unten hinzufügen, ändert
‫das nichts an dieser Tatsache.
‫Okay, also verwenden wir hier
‫catch und dann console. log und protokolliere den Fehler
‫hier, damit du siehst, dass immer noch kein Fehler protokolliert wurde.
‫Und das wieder, weil dieses Versprechen, das hier
‫von dieser Async-Funktion kommt, immer noch
‫als erfolgreich markiert wird.
‫Aber wenn Sie es wirklich als
‫abgelehnt markieren wollten, müssen wir einen Fehler ausgeben.
‫Lassen Sie uns das hier in diesem Catch-Block tun.
‫Wenn also ein Fehler aufgetreten ist, möchten wir ihn nicht
‫nur in der Konsole protokollieren, sondern auch auswerfen.
‫Daher verwenden wir eine eingebaute JavaScript-Funktion namens throw.
‫Und damit können wir einen Fehler auslösen.
‫Damit wird nun diese gesamte Funktion dieses Versprechens als
‫abgelehnt gekennzeichnet.
‫Okay.
‫Eigentlich sollten wir diesen Fehler nicht nur protokollieren,
‫sondern einfach Fehler machen, um ihn ein bisschen sichtbarer zu machen, und
‫vielleicht so etwas wie eine Explosion.
‫Ja, so ähnlich.
‫Okay, also speichern wir es und sehen, was passiert.
‫Und bam, jetzt haben wir also tatsächlich unseren Fehler hier.
‫Es heißt also, dass ich diese
‫Datei nicht finden konnte, also stammt dieses
‫Protokoll von diesem Fangprotokoll hier, aber gleichzeitig wird ein Fehler ausgegeben.
‫Und wenn es einen Fehler wirft, wird
‫das gesamte Versprechen als abgelehnt markiert.
‫Und deshalb tragen wir dann das Fangprotokoll hier unten ein.
‫Was dann natürlich wiederum diese Konsole
‫auslösen wird. Protokoll dieses Fehlers.
‫Okay?
‫Und das ist natürlich eine ganz neue Ebene der Komplexität.
‫Okay.
‫Aber es ist immer noch sehr wichtig zu verstehen, wie das funktioniert,
‫da es im wirklichen Leben die ganze Zeit passiert.
‫Wir müssen also ständig Werte von Async-Funktionen
‫zurückgeben, und daher ist es wichtig,
‫wie Sie mit diesen zurückgegebenen Werten tatsächlich umgehen.
‫Verwenden Sie in diesem Fall DEN und catch.
‫Das Problem dabei ist, dass Versprechen
‫mit Async/Await vermischt werden.
‫Also haben wir hier oben Async/Await,
‫dann verwenden wir plötzlich wieder DEN und
‫fangen hier unten an.
‫Lassen Sie mich Ihnen also tatsächlich ein anderes Muster zeigen.
‫Okay, also kommen wir in unseren Teil
‫hier nicht so herum, eher so.
‫Lassen Sie uns also Async/Await verwenden, um diese Logik zu implementieren.
‫Nun wollen wir dafür keine ganz neue Namensfunktion
‫erstellen und verwenden daher ein bekanntes Muster, das
‫Sie hoffentlich kennen, nämlich
‫ein IIFE, also einen sofort aufgerufenen Funktionsausdruck.
‫Okay, in Klammern definieren wir unsere Funktion.
‫So, und dann rufen wir gleich an.
‫Erinnere dich daran?
‫Da wir in diesem Fall Async/Await verwenden möchten, sagen wir
‫auch, dass es sich um eine Async-Funktion handelt.
‫Okay, und das sieht hier etwas seltsam aus,
‫aber wenn Sie zum Beispiel meinen JavaScript-Kurs besucht haben,
‫wird Ihnen das tatsächlich bekannt vorkommen.
‫Okay, also wieder deklarieren Sie eine Funktion
‫in Klammern und rufen sie dann sofort als Funktion auf.
‫Auf diese Weise müssen Sie nicht
‫noch einmal eine ganze Namensfunktion deklarieren, die Sie später
‫wieder aufrufen.
‫Okay.
‫Da wir jetzt Async/Await verwenden,
‫verwenden wir das Fangmuster try it wieder wie zuvor.
‫Fangen Sie also an, haben Sie hier Zugriff auf den Fehler,
‫und wir können ihn hier eigentlich nicht auslassen.
‫Auch wenn wir diesen Fehler nicht
‫verwenden möchten, müssen wir ihn dennoch hier ausschreiben.
‫Okay.
‫In zukünftigen Versionen von JavaScript
‫wird dies weg sein, aber im Moment müssen wir es so machen.
‫Hier wird also dieser Fehler sein.
‫Und hier oben werden wir all diese Konsolen haben. Protokolle.
‫Dieser
‫und dieser.
‫Und jetzt hoffe ich, dass Sie wissen, wie Sie
‫den Wert tatsächlich aus der Async-Funktion erhalten.
‫Sie wissen also, wie das geht.
‫Eigentlich werde ich das Video pausieren und dir erlauben, selbst
‫herauszufinden, wie du es machen kannst, okay?
‫Nehmen Sie diese kleine Herausforderung an und ich bin in
‫einer Sekunde zurück.
‫Haben Sie es also geschafft, diesen String hierher zu bringen, also
‫diese beiden in die x-Variable einzufügen, genau wie wir
‫es zuvor getan haben?
‫Also einfach so hier?
‫Es ist also wie bei uns zuvor.
‫Sie deklarieren eine Variable und warten dann auf das Versprechen.
‫Und das Versprechen ist in diesem Fall, ein Hundebild zu bekommen.
‫Okay?
‫Diese Funktion hier ist also eine Async-Funktion
‫und gibt daher ein Versprechen zurück.
‫Und der Ergebniswert dieses Versprechens ist
‫dieser Wert hier, der zurückgegeben
‫wird. Wenn Sie also auf diesen Wert warten,
‫wird das Ergebnis dieser String sein.
‫Also speichern wir das in x und können es dann
‫natürlich in die Konsole einloggen.
‫Also trösten. log x.
‫Falls dann ein Fehler auftritt, wird er abgefangen und
‫auch hier in der Konsole protokolliert.
‫Wenn wir es jetzt speichern,
‫dann bekommen wir den Fehler immer noch, weil wir
‫ihn hier hatten, damit dieser Teil immer noch funktioniert.
‫Reparieren, speichern und los gehts.
‫Also funktioniert es jetzt wie gewünscht.
‫Aber auch hier ist es mit Async/Await viel sauberer,
‫sieht viel besser aus und ist auch leichter zu verstehen.
‫Also mischen wir Async/Await hier nicht an einer Stelle und
‫verwenden dann DEN und Catch down hier, wie wir
‫es zuvor mit diesem Codestück hatten.
‫Okay?
‫Im wirklichen Leben passieren solche Dinge die ganze Zeit.
‫Wir haben also eine Async-Funktion und wir haben
‫sie von einer anderen Async-Funktion aufgerufen, und vielleicht haben
‫wir sogar eine andere Async-Funktion
‫von dieser ersten Async-Funktion aufgerufen, und so
‫haben wir eine Reihe dieser Async-Funktionen, die miteinander interagieren.
‫Deshalb ist es sehr wichtig, dass Sie wissen,
‫wie das alles funktioniert.
‫Und noch einmal zur Zusammenfassung:
‫Das Wichtigste ist, dass eine Async-Funktion automatisch
‫ein Promise zurückgibt und dass der Wert, den
‫wir von einer Async-Funktion zurückgeben, der Ergebniswert dieses
‫Promises ist.
‫Von da an können wir es also einfach
‫als weiteres Versprechen behandeln.
‫Und genau das haben wir hier getan, indem wir auf das erste
‫Versprechen gewartet haben, das wir geschaffen haben.
‫Okay?
‫Versuchen Sie also, sich damit auseinanderzusetzen und stellen Sie
‫sicher, dass Sie es wirklich verstehen.
‫Denn für den Rest des Kurses gehe ich
‫davon aus, dass Sie wissen, wie man mit diesem Zeug arbeitet.
‫Und genau deshalb habe ich diesen Abschnitt
‫erstellt, um ihn aus dem Weg zu räumen, bevor wir
‫wirklich anfangen, ohne JS und Express und all diese guten Sachen zu arbeiten.
‫Okay?
‫Wir sind also fast fertig mit diesem Abschnitt, es gibt nur eine
‫Kleinigkeit, die ich Ihnen im nächsten
‫Video zeigen möchte.