‫-: Lassen Sie uns nun
‫über die Probleme sprechen, die auftreten können, wenn wir zu viele Callback-Funktionen verwenden.
‫Und dazu
‫machen wir ein kleines Beispiel, um
‫diesen Effekt zu veranschaulichen.
‫Denken Sie jetzt daran, dass Sie, wenn Sie bereits
‫mit Promises und Async/Await und im Allgemeinen
‫mit Asynchronous Java Script
‫vertraut sind, diesen Abschnitt einfach überspringen und
‫alle Videos als abgeschlossen markieren können, damit
‫Sie immer noch zu 100 Prozent fertig
‫sind Kurs.
‫Aber wenn Sie alles
‫über Asynchronous Java Script und
‫dessen Verwendung in OJS erfahren möchten, dann lassen Sie uns weitermachen.
‫Also fahren
‫Sie fort und holen Sie sich die Starterdateien für dieses
‫Projekt aus den Kursdateien.
‫Ich habe es bereits hier auf meinem
‫Desktop, also diesen Ordner hier.
‫Und es ist nur diese
‫Datei drin, das ist alles, was wir brauchen, um loszulegen.
‫Und ich habe es hier in VS Code bereits geöffnet und
‫was wir zu Beginn tun
‫werden, ist einfach eine NX zu erstellen. JS-Datei.
‫Genau wie vorher.
‫Was wir jetzt tun werden,
‫ist dies, wir werden
‫diese Hundedatei hier verwenden, diese Textdatei.
‫Und von hier aus werden wir die Hunderasse lesen.
‫Und dann machen wir eine HTTP-Anfrage,
‫um ein zufälliges Bild eines Hundes dieser Rasse zu erhalten.
‫Und dann speichern Sie dieses zufällige Bild
‫in einer anderen Textdatei.
‫Es ist also ein
‫dreistufiger Prozess und all dies beinhaltet Callback-Funktionen.
‫Und am Ende werden wir das Problem sehen,
‫das wir haben, wenn wir all
‫diese Callback-Funktionen ineinander verwenden.
‫Okay?
‫Dafür verwenden wir eine
‫recht beliebte API.
‫Was eher eine lustige API ist.
‫Aber für solche Dinge ist
‫es eine gute Idee, es zu verwenden.
‫Es ist also der HUND. CEO, API.
‫Klicken Sie hier einfach auf Dog API.
‫Dann
‫hier die Dokumentation.
‫Und was wir wollen, ist einen zufälligen Hund
‫oder eine bestimmte Rasse.
‫Klicken Sie hier nach Rasse.
‫Und
‫hier unten ist der API-Endpunkt, den wir erreichen werden.
‫Es ist also diese URL hier.
‫Wenn Sie also auf "hier abrufen"
‫klicken, erhalten Sie jedes Mal ein neues Bild, okay?
‫In
‫diesem Abschnitt werden wir also HTTP-Anforderungen ausführen,
‫genau wie wir es im
‫vorherigen Abschnitt kennengelernt haben.
‫Okay.
‫Alles, was wir
‫tun müssen, ist, eine HTTP-Anfrage an diese URL zu erstellen, und
‫dann erhalten wir ein Bild zurück.
‫Okay?
‫Aber für den Moment beginnen wir eigentlich mit
‫einem Teil, in dem wir die Datei lesen und den Inhalt
‫dieser Datei abrufen.
‫Also in unserem Index. js benötigen wir wieder das
‫Dateisystempaket oder -modul.
‫Also
‫FS und benötige hier das FS-Modul.
‫Und genau wie zuvor machen wir fs. readfile und
‫wir machen die asynchrone Version.
‫Okay.
‫Denken Sie daran, dass wir hier den Speicherort der Datei übergeben
‫und dann eine Rückruffunktion,
‫die aufgerufen wird, sobald wir mit dem Lesen der Datei fertig sind.
‫Also haben wir hier unseren Vorlagenstring.
‫Und dann verwenden wir einen Dirname, genau wie zuvor.
‫Also der Name des aktuellen Verzeichnisses.
‫/Hund. TXT.
‫Okay und dann unsere Callback-Funktion,
‫deren erstes Argument wie immer ein Fehler ist.
‫Und dann die Daten, die tatsächlich in der Datei enthalten sind.
‫Und nur um sicher zu gehen,
‫loggen wir es natürlich in die Konsole ein.
‫Also noch ein
‫Template-String, damit wir unsere Daten hier schön ausgeben können.
‫Okay.
‫Starten Sie das Terminal hier
‫und bringen Sie es
‫ein wenig hoch.
‫Und so verwende ich Nodemon genau wie zuvor
‫und dann index. js.
‫Okay, Rasse ist Retriever.
‫Und genau das haben wir hier in dieser Datei.
‫Okay, Retriever ist die Rasse, nach der wir suchen werden.
‫In dieser Rückruffunktion
‫möchten wir nun die HTTP-Anforderung ausführen, über
‫die wir gerade gesprochen haben.
‫Und es gibt tatsächlich Möglichkeiten, dies
‫mit nativen Modulen
‫ohne JS zu tun.
‫Aber es ist einfacher, dafür einfach ein NPM-Paket zu verwenden.
‫Und es gibt wieder
‫viele, aber der, den wir verwenden werden, heißt Super Agent.
‫Später werden wir einen anderen verwenden,
‫aber dafür ist Super Agent im Moment völlig in Ordnung, okay.
‫Und um dieses Modul tatsächlich mit NPM
‫herunterzuladen, erstellen wir zunächst unsere Paket-Jason-Datei.
‫Erinnere dich daran?
‫Lassen Sie mich das einfach beenden
‫und NPM darin machen.
‫Und drücken Sie einfach die Eingabetaste bei all diesen.
‫Dies ist nicht wirklich wichtig.
‫Okay.
‫Wir wollen nur dieses Paket. jason-Datei,
‫damit sie tatsächlich den Namen des von uns
‫verwendeten Pakets enthält.
‫Das machen wir immer, wenn wir ein neues Projekt starten.
‫Und jetzt NPM installieren, oder
‫wir können einfach das I verwenden, das gleich ist und dann den
‫Namen des Pakets.
‫Also nichts neues da oder?
‫Um dieses Paket
‫nun zu verwenden, erstellen wir
‫eine neue Variable, die dann die Super Agent-Funktion enthält,
‫die uns dieses Modul zur Verfügung stellt.
‫Lassen Sie uns nun fortfahren und diese Super Agent-Funktion
‫tatsächlich verwenden.
‫Um eine Get-Anfrage auszuführen, haben
‫wir einfach die Methode get verwendet.
‫Also get und dann brauchen wir diese URL.
‫Okay, das hier, das ich dir schon mal gezeigt habe.
‫Kopieren Sie es
‫einfach und fügen Sie es
‫hier in eine Vorlagenzeichenfolge ein.
‫Denn jetzt werden wir diese Rasse
‫hier tatsächlich ersetzen.
‫Okay, das wollen
‫wir nicht, sondern verwenden
‫es, das wir aus unserer Datei bekommen.
‫In diesem Fall sind es also Daten.
‫Richtig?
‫Auf
‫diese Weise können wir tatsächlich eine HTTP-Get-Anfrage ausführen.
‫Um nun die Daten
‫zu erhalten, müssen wir tatsächlich auch die Methode end verwenden.
‫Und hier übergeben wir
‫die Callback-Funktion.
‫Es ist also wieder ein Fehler,
‫zuerst zurückrufen und
‫dann auch das Ergebnis übergeben.
‫Lassen Sie uns also in
‫dieser Funktion
‫zunächst das Ergebnis in der Konsole protokollieren.
‫Die Daten, die wir erhalten, befinden sich also in der Antwortvariablen.
‫Also dieser hier.
‫Und dann ist das der Körper.
‫Hier ist also die eigentliche Reaktion.
‫Okay, jetzt lassen Sie uns das testen.
‫Und jetzt mit diesem Save hier ist es tatsächlich nach unten gegangen.
‫Das liegt wiederum
‫an der vorherigen Erweiterung, die wir früher eingerichtet haben.
‫Und vielleicht haben Sie
‫auch bemerkt, wie es die normalen Anführungszeichen, die ich hier hatte,
‫durch diese doppelten
‫Anführungszeichen ersetzt und auch das Semikolon hier oben eingefügt hat.
‫Und tatsächlich haben wir es im
‫letzten Abschnitt oder in einem
‫der letzten Abschnitte so eingerichtet, dass wir
‫die einfachen Anführungszeichen immer in Ordnung haben.
‫Um unseren Code hier konsistent zu
‫halten, lassen Sie
‫uns also wirklich sehr schnell die schönere Konfigurationsdatei erstellen.
‫Denken Sie also daran, dass das hübscher ist.
‫Dann haben wir dort ein einfaches Zitat.
‫Setzen Sie es auf wahr.
‫Denken Sie auch an die Druckbreite.
‫Und setze es auf 80.
‫Okay, speichern Sie es.
‫Speichern Sie diese noch einmal.
‫Und Sie sehen, wir haben jetzt unsere Einzelzitate zurück.
‫Das sieht meiner Meinung nach also viel schöner aus.
‫Auch hier können Sie natürlich Ihre
‫eigenen Einstellungen verwenden, wenn Ihnen dies nicht gefällt.
‫Gut.
‫Wie
‫auch immer, dieser Code hier
‫sollte jetzt bereits die HTTP-Anfrage ausführen.
‫Also lass
‫es uns einfach mal testen.
‫Und
‫tatsächlich haben wir dieses Bild hier.
‫Was wir
‫also wollen, befindet sich in
‫diesem Buddy in der Message-Eigenschaft.
‫Also
‫Punktnachricht.
‫Also einfach so.
‫Und hier haben wir also unser Retriever-Image.
‫Lass uns weitermachen und die Rasse hier tatsächlich ändern.
‫Und mit Hunden kenne ich mich nicht so gut aus.
‫Lass uns hier einfach diese Rasse verwenden, die ich
‫kenne, Labrador.
‫Ich weiß nicht einmal, wie ich es sagen soll.
‫Aber ich denke,
‫es ist es, es existiert.
‫Lassen Sie uns hier noch einmal speichern.
‫Und so haben wir jetzt ein anderes Bild.
‫Wir können tatsächlich hier darauf klicken und es
‫wird dieses Bild für uns öffnen.
‫Okay.
‫Um diese HTTP-Anfrage hier auszuführen, brauchten wir also die
‫Daten, die wir zuvor erhalten haben.
‫Also diese Daten.
‫Also mussten wir diese Anfrage
‫hier in dieser Callback-Funktion der
‫Read-File-Funktion ausführen, richtig?
‫Und so haben Sie hier bereits eine Rückruffunktion.
‫Also dieser innerhalb eines Rückrufs.
‫Aber jetzt werden wir tatsächlich noch einen hinzufügen.
‫Denn nun wollen wir diesen String hier in
‫eine neue Textdatei speichern.
‫Und das werden wir hier tun.
‫Und dann wird das wieder eine
‫weitere Rückruffunktion haben.
‫Okay, sinnvoll?
‫Also fs
‫writefile
‫und dann den Namen der Datei.
‫Nennen wir das ein Hundebild. Text.
‫Dann die Daten, die wir in dieser Datei speichern möchten,
‫die übrig ist. Karosserie. Botschaft.
‫Und dann die Rückruffunktion.
‫Und dieser wird natürlich keine Daten haben,
‫aber wir haben den Fehler wieder.
‫Lassen Sie uns etwas in der Konsole
‫protokollieren, z. B. ein zufälliges Hundebild, das
‫in einer Datei gespeichert ist.
‫Speichern Sie es, es wird
‫dann erneut ausgeführt und hier ist unsere Bilddatei.
‫Und tatsächlich können Sie sehen, dass
‫VS-Code dieses Bild hier für uns anzeigt.
‫Speichern Sie es hier noch
‫einmal, es wird dann unseren Code
‫erneut ausführen und jetzt haben wir
‫tatsächlich ein anderes Image.
‫Gut.
‫Unser Code funktioniert also tatsächlich.
‫Lassen Sie uns hier einfach ein kleines
‫Fehlerhandle hinzufügen, falls etwas schief geht.
‫Nehmen wir zum Beispiel an, wir fügen hier einen seltsamen Namen ein.
‫Führen Sie dies erneut aus.
‫Und so wird es im Moment kein Bild dafür
‫finden können.
‫Und das führt hier tatsächlich zu einem Fehler.
‫Daher sollten wir
‫diese Art der Fehlerbehandlung immer am Anfang durchführen und
‫dies sagen,
‫wenn ein Fehler aufgetreten ist,
‫und wir können Fehler einfach protokollieren. Botschaft.
‫Und eigentlich sollten wir auch sagen,
‫dass wir bei einem Fehler sofort von dieser Funktion zurückkehren möchten.
‫Es wird also diesen Fehler zurückgeben und
‫an der Konsole protokollieren.
‫Und dann passiert nichts mehr.
‫Okay.
‫So heißt es nochmal, hier nicht gefunden.
‫Und es wurde nichts in der
‫Datei gespeichert, da wir bereits von der Funktion hier oben zurückgekehrt sind.
‫Okay?
‫Und das gleiche hier unten,
‫falls beim Speichern der Datei auf der Festplatte ein Fehler auftritt.
‫Lass uns hierher zurückgehen und es noch
‫einmal speichern.
‫Und so funktioniert es jetzt wieder einwandfrei.
‫Okay.
‫Dies ist also
‫nur ein
‫kleines Beispiel, um Ihnen zu zeigen, wie einfach es
‫ist, Rückrufe innerhalb von Rückrufen innerhalb von Rückrufen zu erhalten.
‫Und das liegt natürlich daran, dass
‫wir in Note JS bereits
‫wissen, dass wir immer asynchronen Code verwenden sollten, oder?
‫Am Ende haben wir Rückrufe innerhalb von
‫Rückrufen innerhalb von Rückrufen verwendet.
‫Und manchmal kann
‫es natürlich noch tiefer gehen als das, was wir hier haben.
‫Sie können
‫natürlich 10 Ebenen ineinander haben.
‫All diese Rückrufe lassen
‫unseren Code etwas unordentlich aussehen.
‫Es macht es schwer zu verstehen und auch
‫im Allgemeinen schwer zu pflegen.
‫Auch hier vielleicht nicht auf dieser Ebene mit nur
‫drei Rückrufen ineinander.
‫Aber wenn wir es noch tiefer verschachtelt hätten,
‫könnte es schnell zu einem
‫Albtraum werden, Code wie diesen zu pflegen.
‫Und deshalb wird
‫dieses Muster Call-Back-Hölle genannt.
‫Diese Dreiecksform
‫ist in unserem Code leicht zu erkennen.
‫Das haben wir hier.
‫Wie diese Art von Dreiecksform.
‫Immer wenn du das siehst, ist es ein Zeichen dafür,
‫dass du im
‫Grunde in der Hölle bist.
‫Okay?
‫Und Sie
‫werden diesen Begriff vielleicht sehen oder hören, wenn Sie
‫in Note JS recherchieren oder etwas Ähnliches.
‫Aber im Moment ist dies der einzige
‫Weg, den wir kennen, um asynchronen Code
‫zu schreiben.
‫Aber das werden wir uns für den Rest dieses
‫kleinen Abschnitts sparen.
‫Also werden wir lernen, wie man
‫etwas namens Versprechen verwendet.
‫Und das wird dann am
‫Ende unser
‫Problem lösen und unseren Code leichter lesen und warten.
‫Lassen Sie uns das im Rest des Abschnitts tun.