Asynchrones JavaScript meistern: Callbacks, Promises und async/await

1. Einführung in den Kurs: Willkommen bei Mastering Asynchronous JavaScript mit Hilfe von Callbacks, Promises und asynchronen Await-Keywords Mein Name ist Wessel und ich werde während des gesamten Kurses Ihr Kursleiter sein Ihr Ich freue mich, Sie durch eines der wichtigsten Konzepte in der Welt der JavaScript-Entwicklung zu führen wichtigsten Konzepte in der , nämlich den Umgang mit asynchronen Operationen Anfangs etwas knifflig, aber es ist ein wesentlicher Schritt beim Aufbau effizienter, nicht blockierender Webanwendungen In diesem speziellen Kurs unterteile ich komplexe Themen in und leicht verständliche Arten von Anwendungen, oder Sie haben es mit APIs zu tun . Dieses Wissen wird Ihnen die Fähigkeit eröffnen mehrere Aufgaben gleichzeitig zu bearbeiten , ohne Ihre Anwendung zu verlangsamen Hier ist also ein kleiner Vorgeschmack auf das, was wir in diesem speziellen Kurs behandeln werden Wir werden also mit Rückrufen beginnen und verstehen, wie Sie Rückrufe in Ihrer auf einem Jobskript basierenden Bewerbung verwenden können Rückrufe in Ihrer auf einem Jobskript Dann werden wir zu Promises übergehen, was eine moderne und leistungsstarke Alternative zu Wir werden diese beiden Konzepte oder all diese Konzepte im Laufe des Kurses anhand von realen Beispielen und auf praktische Weise lernen oder all diese Konzepte im Laufe des Kurses anhand von realen Beispielen und auf praktische Weise Und schließlich werden wir uns mit den Schlüsselwörtern async und await befassen, und Sie werden asynchronen Code schreiben aussieht und sich genauso verhält wie Und es ist einfach und wirklich, wirklich mächtig. Wir werden diese Möglichkeiten und Konzepte in diesem speziellen Kurs erschließen , und am Ende dieses Kurses werden Sie ein solides Verständnis des Schreibens von asynchronem Code in der Welt von Ja Script haben asynchronem Code in der Welt von Ja Script Dieser Kurs richtet sich an Entwickler aller Niveaus. sind , ob Sie ein fortgeschrittener Ja-Script-Entwickler nur versuchen, bestimmte Konzepte in einem synchronen Ja-Skript weiterzuentwickeln, dann können Sie sich für diesen Kurs anmelden oder ob Sie ein Anfänger sind , der dieses Konzept von Rückrufen, Versprechen und asynchronem Warten ausprobieren möchte bestimmte Konzepte in einem synchronen Ja-Skript weiterzuentwickeln, dann können Sie sich für diesen Kurs anmelden oder ob Sie ein Anfänger sind , dieses Konzept von Rückrufen, Versprechen und asynchronem Warten ausprobieren , dann können Sie anmelden Und wenn Sie ein Entwickler auf mittlerem Niveau sind, dieser Kurs bestimmt auch weiterhelfen Dieser Kurs richtet sich also an Entwickler aller Stufen. Wie ich schon sagte, egal ob Sie ein großer Entwickler auf mittlerem Niveau oder ein Profi auf fortgeschrittenem Niveau sind. Okay, du wirst etwas aus diesem Kurs herausholen. Bist du jetzt bereit, deine Ja Script-Fähigkeiten zu verbessern? Ich freue mich riesig. Lassen Sie uns gemeinsam in diesen Kurs eintauchen. 2. Einstieg in eine wunderbare Reise mit einem ersten Setup: Hallo, alle zusammen. Also, um JavaScript auszuführen, werden wir einige Einstellungen auf unserem lokalen Computer vornehmen, richtig? Jetzt können Sie natürlich JavaScript ausführen, indem Sie im Browser mit der rechten Maustaste auf diese Weise klicken und zur Konsole wechseln und hier JavaScript-Behandlungen schreiben. Dies ist jedoch nicht ideal, wenn Sie lange, umfangreiche Skripts für Webanwendungen in Produktionsqualität schreiben möchten . Nun, hier benötigen Sie ein Setup auf Ihrem lokalen Computer. Wir werden also eine IDE verwenden. Falls Sie diesen Begriff IDE nicht kennen , steht er für integrierte Entwicklungsumgebung, die Ihnen die Tools bietet um Code zu schreiben und auszuführen. Also werde ich nach Visual Studio-Code suchen , weil wir ihn verwenden werden. Nun, wenn Sie bereits einen Visual Studio-Code auf Ihrem System installiert haben oder wenn Sie wissen, wie man ihn installiert, dann ist das gut. Aber ich gehe davon aus, dass Sie ihn nicht auf Ihrem System installiert haben um den Schülern zu helfen , die sich dieses Prozesses nicht bewusst sind. Also gehe ich zu dieser speziellen Website, code.visualstudio.com Okay? Ein bisschen reinzoomen. Nun, hier, der Screenshot , den Sie sehen, zeigt wie Visual Studio-Code aussieht, okay? Und Sie können sehen, dass es eine Syntaxhervorhebung gibt, die Sie sehen können. Die Benutzeroberfläche wird also in einer anderen Farbe hervorgehoben. Button-Requisiten werden in einer anderen Farbe hervorgehoben. Das sind also alle Vorteile der IDE, okay? Sie können die schöne Ordnerstruktur auf der linken Seite sehen . Unten befindet sich ein Terminal mit der ganzen Farbcodierung und all dem. Es bietet dem Entwickler viele Vorteile. Wenn Sie also nach unten scrollen, können Sie sehen, dass Visual Studio-Code unterstützt. Während ich dieses Video aufnehme, unterstützt es so viele Programmiersprachen, okay? Sie können sogar Erweiterungen hinzufügen. Was sind nun Erweiterungen? Erweiterungen erweitern oder erweitern grundsätzlich die Fähigkeiten, die Visual Studio-Code standardmäßig bietet. Okay? Also, wenn du etwas Unterstützung für Python hinzufügen willst, okay? Also mehr Unterstützung für Python. Sie können diese Erweiterung also hinzufügen. Wenn Sie Unterstützung für GeucPilot hinzufügen möchten oder KI beim Programmieren verwenden möchten, können Sie Get up Copilot CC plus hinzufügen Sie können sehen, dass es Unmengen von Erweiterungen gibt, und es gibt einen Marktplatz für Erweiterungen, von dem Sie all das herunterladen und installieren können , und das Du kannst dir Git Up Copilot ansehen, ein bisschen von. Es hebt also alles verschiedene Funktionen hervor. Sie können die Farbthemen, Einstellungen und Profile anpassen. Es gibt eine Menge Zeug, okay? Es hat eine wirklich gute Integration mit dem Bewegungssteuerungssystem und all dem Okay? Sie können sich also diese Website ansehen und nachschauen, was sie zu bieten hat. Aber wenn du oben nach oben scrollst, wirst du hier diese Schaltfläche zum Herunterladen für Windows sehen , okay? Wenn Sie jetzt einen Mac oder Linux verwenden, wird Ihnen die Download-Option für Ihr entsprechendes Betriebssystem angezeigt. Oder wenn Sie aus irgendeinem Grund nicht sehen, können Sie zu anderen Plattformen gehen und hier sehen , welche Plattformen alle unterstützt werden. Okay? Ich habe also bereits Visual Studio-Code auf meinem System installiert, also werde ich ihn nicht installieren, aber die Installation ist sehr einfach. Es ist wie jede Anwendung, die Sie auf dem System installieren. Es gibt keine komplexe Konfiguration, die Sie selbst für Mac vornehmen müssen , es ist einfacher, und Sie können hier sehen, dass es mehrere Versionen gibt, wenn und Sie können hier sehen, dass es mehrere Versionen gibt, wenn Sie also einen Intel-Chip verwenden , können Sie diese installieren. Apple Silicon, du hast diesen hier drüben. Und auch für Linux Ubuntu-basierte Systeme haben Sie hier die Möglichkeit, es herunterzuladen und zu installieren. Okay? Jetzt habe ich das definitiv auf meinem System installiert, okay? Also hier habe ich es installiert, wie Sie sehen können. Okay? Also, wenn du es installierst und zum ersten Mal öffnest, wirst du Folgendes sehen. So wird es dich präsentieren. Ihre Ansicht könnte ein wenig abweichen da ich bereits Visual Studio Code verwende, also sehe ich mir die letzten Projekte an, die ich verwendet habe. Also werde ich das einfach schließen, okay? Und hier fragt es mich: Hey, du hast noch keinen Ordner geöffnet. Ja, Sie können Ordner hier in der linken Seitenleiste öffnen, und es wird Ihnen die Baumstruktur angezeigt. Sie können Dateien von hier aus erstellen und verwalten, oder Sie können sogar ein Repository klonen. Und wie gesagt, es hat eine wirklich gute Integration mit den Git of Ocean-Kontrollsystemen. Sie können das also auch nutzen . Ordnung? Nun, ich möchte Sie alle bitten, einfach zu Ihrer Ordnerstruktur zu gehen und einen Ordner zu erstellen, wenn Sie Jascript üben wollen Okay? Also das ist mein Ordner, in dem ich Ja Script üben werde , okay? Und öffne einfach diesen Ordner hier im Visual Studio-Code. Öffnen Sie den Ordner, Sie können Ordner öffnen sagen und Sie können zu dem Ordner navigieren, den Sie gerade erstellt haben. Oder alternativ, Sie sind unter Windows, Sie haben eine Option. Sie können mit der rechten Maustaste klicken. Sie können hier die Option „Mehr anzeigen “ und „Mit Visual Studio-Code öffnen“ sagen. Öffne hier mit Code. Das ist was es ist. Das ist also Visual Studio, was kein Visual Studio-Code ist, es ist anders. Also musst du dir dieses Logo ansehen. Okay? Dieser. Okay? Und wenn du „Öffnen“ sagst, wirst du sehen, dass der Ordner hier geöffnet wird. Okay. Maximiere es. Okay? Du kannst sehen. Jetzt habe ich zwei Instanzen oder zwei Windows oder Visual Studio-Code hier drüben. Okay? Das ist mein Ordner namens JavaScript , den ich erstellt habe. Und hier werde ich all meine Ja-Skriptdateien und alles , worüber ich lernen werde, erstellen Ja-Skriptdateien und alles , worüber . Das war es also auch schon. Ich hoffe, Sie konnten dieses Setup auch erfolgreich auf Ihrem System durchführen. 3. Callbacks meistern: Die Grundlagen des asynchronen Javascripts: Jetzt ist es also an der Zeit, über Rückrufe zu sprechen. Was ist nun ein Rückruf? Per Definition ist ein Callback also eine Funktion, die als Argument an eine andere Funktion übergeben wird Okay? Eine Funktion, die als Argument an eine andere Funktion übergeben und nach Abschluss eines bestimmten Ereignisses oder einer Operation ausgeführt wird . Lassen Sie uns nun im Detail verstehen, warum Sie so genannte Callbacks benötigen Okay? Lassen Sie mich Ihnen ein Beispiel geben. Nun, es wird Szenarien geben, in denen Sie an einer Art Code arbeiten bei dem Sie ein externes Ereignis oder eine Schnittstelle zu einem externen System durchführen müssen ein externes Ereignis oder eine Schnittstelle , okay? kann etwas Zeit in Anspruch nehmen, es ist vielleicht nicht sofort wie bei grundlegenden Operationen, aber es kann einige Zeit dauern, bis Ihr System warten muss , bis es die Ausgabe erhält, okay? Zum Beispiel ein API-Aufruf. Wenn Sie also einen API-Aufruf durchführen, würden Sie normalerweise auf die Antwort des API-Aufrufs warten, oder? Es ist nicht so, dass Sie den API-Aufruf auslösen und sofort eine Antwort erhalten. So ist es nicht. Sie haben einen API-Aufruf ausgelöst, Sie warten auf die Antwort, Sie erhalten die Antwort und dann verwenden Sie die Antwort. Okay? Lassen Sie uns also ein Szenario simulieren, in dem wir einen API-Aufruf durchführen. Okay. Ich würde also ein Szenario mit Hilfe der Timeout-Funktion simulieren. Okay? Also in JavaScript haben wir ein sogenanntes Timeout, okay, das im Grunde verwendet werden kann , um eine Verzögerung auf Ihrer Seite einzustellen Okay? Also lass mich dir hier ein Beispiel geben. Okay? Nehmen wir an, ich habe diese Nachricht. Okay, also ich kann hier Console Dot Log sagen. Okay. Und ich kann sofort sagen. Jetzt wird diese Nachricht sofort angezeigt, oder? Es ist nicht so, als würde sie hier nach einer Weile angezeigt werden , oder? Es würde sofort angezeigt werden. Okay? Aber es wird Szenarien geben, in denen ich vielleicht eine Verzögerung verursachen möchte. In diesem Fall können Sie also die Auszeit nutzen. Sie können also sagen, legen Sie hier eine Auszeit fest. Okay. Ich kann eine solche Funktion haben, o. Und das wäre eine anonyme Funktion, keine Parameter. Ich kann Csol Log sagen, ich kann Delay sagen. So etwas wie das hier Und ich kann sogar die Verzögerungszeit einstellen. Sagen wir also 2000. Jetzt sind 2000 Millisekunden, was bedeutet, dass es um 2 Sekunden verzögert wird Also kann ich das speichern. Sie können es sofort sehen und nach 2 Sekunden werden Sie hier eine Verzögerung sehen, oder? So funktioniert es also. Wenn ich hier drei Punkte hinzufüge, wenn ich das speichere, siehst du sofort und dann eine Verzögerung. Okay? Also, warum lernen wir gerade etwas über Timeout ? Warum sprechen wir über eine Auszeit Weil wir Timeout verwenden werden, um ein Beispiel für etwas zu simulieren , das von einem externen System abhängig ist, wie zum Beispiel einen API-Aufruf, oder? Der API-Aufruf wird etwas Zeit in Anspruch nehmen, oder? Sie lösen zum Beispiel Ihre Anfrage an den Server aus, und dann verarbeitet der Server die Anfrage. Ich werde mit der Datenbank sprechen und sie wird sich mit den Daten bei Ihnen melden. Okay? Also, es gibt eine kleine Verzögerung, etwa 1 Sekunde, 2 Sekunden, je nachdem, wie schnell die Dinge bei dir laufen, oder? Es wird also eine Verzögerung geben, und wie simulieren wir eine Verzögerung? Wir werden die Verzögerung im R-Code mit Hilfe von Timeout simulieren im R-Code mit Hilfe von Timeout Stimmt das? Nehmen wir an, ich habe hier einen Code. Okay. Was ich tun werde, ist eine Funktion zu erstellen. Okay? Also gibt es eine Funktion. Ich nenne diese Funktion hier als „Daten abrufen“. Okay? Ich brauche hier keine Parameter. Okay. Und ich werde hier so eine Auszeit festgelegt haben. Okay. Und ich kann hier tatsächlich die Pfeilfunktionen nutzen. Okay? Anstelle der älteren Syntax kann ich auf Pfeilfunktionen umsteigen. Und hier kann ich sagen, dass Daten vom Server abgerufen wurden. Okay? Also kann ich Daten von. Okay. Und hier kann ich eine Verzögerung von 2 Sekunden hinzufügen. Okay? Also das ist erledigt. Ordnung. Und was wir tun können, ist, dieses besondere Ding zu nennen. Okay. Also sagen wir, ich habe, ich kann hier Funktion sagen. Ich kann hier sagen, Daten verarbeiten, okay? Und hier kann ich Daten abrufen sagen, so etwas in der Art. Okay. Ich nenne das. Und ich rufe Prozessdaten an. Okay? Ich meine, okay, also ich sage Prozessdaten. Okay. Etwas wie das hier. Was passiert ist, dass ich hier zuerst Prozessdaten aufrufe, wie Sie sehen können, Prozessdaten. Prozessdaten rufen dann fetch data auf, und fetch data führt eine Art Operation durch, wie zum Beispiel mit einem EPI zu sprechen oder so, und es Okay? Okay, wenn ich das speichere, siehst du nach 2 Sekunden Verzögerung und Daten vom Server. Okay? Also vorerst werde ich das einfach entfernen, ich werde es einfach auskommentieren, da wir verstanden haben , was Timeout ist Aber hier versuchen wir, die abzurufen, und die Daten werden Verzögerung von 2 Sekunden abgerufen Okay? Nehmen wir an, wir holen die Daten ab und erhalten eine Antwort, die wir abfangen wollen Okay. Nehmen wir an, wir holen die Daten ab und erhalten eine Antwort vom Server, die wir abfangen möchten Also werde ich hier eine hypothetische Antwort haben, die Folgendes darstellen wird Nehmen wir an, das sind die Daten, die vom Server dargestellt werden Okay? Es heißt Beispieldaten. Okay? Was in diesem Fall passieren würde ist, dass ich die Daten hier bekommen kann. Ich kann sagen, lass die Daten hier drüben. Okay. Ich kann hier ein Konsolenprotokoll erstellen. Okay, ich kann Daten sehen, so etwas. Wenn ich das speichere, wirst du sehen, dass ich keine Ausgabe erhalte. Ich werde undefiniert. Okay? Das hat nicht funktioniert, weil Abrufen von Daten eine Verzögerung hat, oder? dauerte also 2 Sekunden, bis dieses Ding zurückkam. Okay? Aber was ist passiert, ist, dass es ausgeführt wurde bevor es zurückkam, oder? Das hat eine Verzögerung von 2 Sekunden. Dieses Ding hat also nicht darauf gewartet dass dieses Ding die Ausführung beendet und ist mit dem Ergebnis wieder da. Stattdessen hat es dies zuerst ausgeführt. Richtig? Also was passiert ist, ist, dass wir undefiniert sind Also wurden die Daten zurückgegeben, aber dieser Code wurde ausgeführt und das hat nicht wie erwartet funktioniert, oder? Stellen Sie sich jetzt vor, Sie haben hier einen API-Aufruf, echten API-Aufruf anstelle eines Timeouts hier. Ich habe einen API-Aufruf und erhalte eine Antwort vom Server Jetzt muss ich warten, bis ich die Antwort vom Server erhalte, oder? Ich kann nicht einfach direkt mit dem nächsten Schritt fortfahren, oder? Und hier kommen Rückrufe ins Spiel, oder? Hier ist ein Rückruf erforderlich. Dieses Beispiel können Sie also sehen, vorausgesetzt, Sie haben hier eine Operation, die zu einer Verzögerung führt Okay, von etwa 2 Sekunden. Und wir haben diese Verzögerung mit Hilfe dieser eingestellten Timeout-Funktion simuliert mit Hilfe dieser eingestellten Timeout-Funktion Angenommen, Sie haben eine Operation, die eine Verzögerung verursacht, okay, so eine Operation, die eine Verzögerung verursacht, okay, würden die Dinge ohne Rückrufe funktionieren Sie benötigen also einen Callback, eine Funktion, die als Argument an eine andere Funktion übergeben und ausgeführt wird, nachdem ein bestimmtes Ereignis oder eine bestimmte Operation Was ist nun das Ereignis in unserem Fall? Das Ereignis in unserem Fall ist dieser Abrufvorgang oder dieser verzögerte Vorgang , den wir haben Okay? Also, wie würden die Dinge funktionieren? Lassen Sie mich dieses Beispiel hier aktualisieren, okay? Also was ich tun würde, ist hier einen Rückruf zu haben , so etwas Okay. Und was wir tun können, ist, es mir mitzuteilen, oder , du weißt schon, anstatt dieses Beispiel zu modifizieren, würde ich dieses Beispiel einfach kopieren, okay. Und wir würden es erstellen, ich würde dieses Beispiel intakt lassen und ich würde mich hier zurückrufen, okay? Und ich sage mit Anruf hier. Okay, das mache ich , damit wir beide Beispiele haben und unterscheiden können , was der Unterschied ist. Okay? Also du kannst hier drüben Fetch Data sehen und ich rufe Fetch Data mit Okay? Also Daten mit Callback holen, ich kann mich hier zurückrufen lassen Okay? Das ist ein Rückruf Okay. Also, hier drüben kann ich hier, ich rufe diese Prozessdaten mit Rückruf an, okay? Und das wird von hier aus aufgerufen. Wie ich das nun ändern würde, ist, dass ich diese Daten hier als Parameter nehmen würde . Okay, ich würde das hier loswerden. Okay. Das ist also die Callback-Funktion , die ausgeführt wird, sobald dieser Vorgang abgeschlossen ist Also diese Timeout-Operation, sobald sie abgeschlossen ist, müssen wir die Daten drucken, richtig Also akzeptiere ich hier Daten als Parameter und mache ein Konsolenprotokoll, okay Was ich tun würde, ist jedes Mal, wenn ich diese Prozessdaten aufrufe , mit Rückruf Was ich tun würde, ist, anstatt das aufzurufen, würde ich sagen, Daten mit Rückruf hier abrufen Ich würde diese Funktion sofort hier aufrufen und ich würde sie als Argument übergeben, diese Funktion wie diese Also benutze ich jetzt Rückrufe. Und wenn ich das speichere, okay, lass mich das hinzufügen und hier etwas mit Callback hinzufügen. Okay? Und das ist mit Rückruf erledigt und ich erhalte die Daten. Ich füge ein cooles Okay? Also, anstatt zurückzukehren, kann ich sagen, dass ich hier drüben sagen kann. Ich muss zuerst Daten erstellen, okay? Also sage ich Daten. Es entspricht so etwas. Das sind also die Daten. Nehmen wir an, das sind die Daten, die vom Server zurückgegeben werden. Jetzt nehme ich diese Daten und sage Callback und ich gebe sie an die Daten weiter, etwa so Wenn ich das speichere, wirst du sehen, dass das erste undefiniert ist. Sie können Daten vom Server sehen, Daten vom Server, und hier sehen Sie mit Callback, richtig? Daten vom Server werden also aufgrund dieses Konsolenprotokolls zweimal gedruckt Wenn ich das also los werde und wenn ich das speichere, werden Sie Daten vom Server sehen. Also das ist einer, und dann haben Sie mit Callback-Beispieldaten hier drüben. Ich hoffe, es ist klar, was der Nutzen von Callback hier drüben ist, was der Anwendungsfall ist Also hier war das eine Funktion , die ausgeführt werden sollte, wenn die Daten erfolgreich zurückgegeben wurden Okay? Also hier drüben, wenn Sie sehen, wann die Daten erfolgreich zurückgegeben wurden, wurde diese Funktion ausgeführt, wie Code darin, richtig? Anstatt das zu tun, haben wir also diese Funktion selbst übergeben. Hier können Sie also sehen, dass diese Funktion selbst an eine andere Funktion übergeben wird , okay? Das ist eine Funktion, die mit der API interagiert oder irgendeine Operation ausführt , die zu Verzögerungen führt, okay? Und hier wird diese Funktion als Callback übergeben. Okay. Sobald der Vorgang abgeschlossen ist, wird die Callback-Funktion mit den Daten aufgerufen und die Daten kommen hierher und sie druckt die Daten hierher, richtig? Also hoffe ich, dass das klar ist. Anstatt jetzt undefiniert zu werden, ist das, was passiert, ist, dass diese gesamte Operation wartet Es wartet 2 Sekunden, bis die Daten abgerufen werden. Und dann werden diese Prozessdaten mit Callback zusammen mit den Daten , die vom Server empfangen wurden, aufgerufen , die vom Server empfangen wurden, und dann werden sie auf die Steuerung gedruckt. Welche Operation Sie auch ausführen möchten, Welche Operation Sie auch ausführen möchten Sie können sie hier hinzufügen Okay. So funktioniert der Rückruf, und ich hoffe, es ist klar, warum diese Sache wichtig ist Okay? Nun, noch eine Sache, die ich dir hier zeigen möchte, du kannst Rückrufe, also Rückrufe bei Erfolg, genauso wie Fehler haben , okay ? , okay Das ist also etwas, das ich euch allen zeigen möchte. Okay? Was Sie also tun können, ist, bevor zu Rückrufen mit Erfolg und Fehlern gehen, ich möchte Ihnen hier auch eine Syntax zeigen, nämlich anonyme Callback-Funktionen hier. Okay. Also hier, was wir tun ist hier in diesem speziellen Beispiel, wenn ich das kopiere. Okay. Das ist nicht anonym, oder? Lassen Sie mich diese beiden auf dem Laufenden halten. Okay. Ich sage hier einfach nein. Okay. Und dieser auch nicht Dieser auch nicht Dieser hier drüben. Okay. Ich hoffe, alles ist aktualisiert. In Ordnung. Nun, was passiert ist, dass wir diese Funktion tatsächlich an diese spezielle Funktion hier drüben übergeben, oder? So können wir die Syntax verkürzen. Ich kann das einfach rausschneiden, hier drüben kann ich einfach Funktion sagen. Ich kann einfach Daten hier akzeptieren und ich kann einfach machen, uups , ich brauchte keine lockige Paese, ich kann das einfach so einfügen Okay? Nun, das ist nicht nötig, so wird die Syntax, mit Anonym. Ich kann sagen, ohne hier drüben. Ich kann das speichern und du siehst Daten vom Server mit Rückruf ohne, du kannst das auf 3 Sekunden erhöhen Lassen Sie uns sehen, wie das funktioniert. In Ordnung. Sie können Daten vom Server sehen, Daten mit Rückruf und Daten ohne Oder wenn ich das auf 10 Sekunden aktualisiere, sollte es gut funktionieren. Okay, eigentlich ein Fehler hier drüben, das ist das Aufrufen von Daten mit Rückruf Okay. Es bezieht sich also immer noch auf die coole Funktion, aber ich werde es auch mit Annan hier aktualisieren Ich habe mich gefragt, warum es die Änderungen nicht innerhalb von Sekunden widerspiegelt Sie können also nach 10 Sekunden hier drüben sehen, Annan hier drüben reflektiert wird Du kannst es sehen. Okay, du kannst es sehen. Also hat es mit einer kürzeren Syntax einwandfrei funktioniert. Das ist also ein Beispiel für anonyme Callback-Funktionen. Okay? Nun möchte ich über Rückrufe bei Erfolg und Fehlern sprechen Rückrufe bei Erfolg und Fehlern Nun, es wird Szenarien geben, in denen, wenn Sie einen EPA-Anruf tätigen die Möglichkeit besteht, dass die Dinge erfolgreich sind und nicht, oder? Also kopiere ich das hier drüben. Nehmen wir an, es gibt eine Operation , die wir durchführen möchten. Okay. Ich sage, mit Erfolgsmeldung, etwa so. Sie können hier zwei Rückrufe tätigen. Erfolg, Rückruf und Sie können einen Fehler haben, Rückruf, so etwas Okay. Also was passiert, ist hier drinnen, innerhalb des festgelegten Timeouts, kannst du Code haben Nehmen wir an, ich habe einen Code. Quark. Okay. Mir ist ein Fehler aufgetreten, sagen wir mal, ich behalte diese beiden Angaben bei. Nehmen wir an, es ist ein boolescher Wert hier drüben. Okay. Ups, wenn ein Fehler aufgetreten ist, muss ich nur den Success-Callback anrufen, richtig? Success-Callback anrufen, richtig Erfolgreicher Rückruf mit einigen Daten, ich kann einige Daten wie Fehler weitergeben Kabel oder so. Okay? Und wenn das nicht der Fall ist, dann kann ich hier Se sagen. Okay. Und stattdessen kann ich sagen, okay, also wenn es kein Fehler ist, dann kannst du wahrscheinlich die normale Sache so weitermachen lassen. Okay, du kannst das haben. Und anstatt hier Callback anzurufen, wirst du sagen, Hoppla, das sollte kein Fehler sein Das sollte ein erfolgreicher Rückruf sein. Und wenn es sich um einen Fehler handelt, rufen Sie den Fehler-Callback hier auf, ungefähr so, oder? So werden die Anrufe also sein, oder? Und du kannst es sehen, also ändern wir das hier auf vier, okay, 4.000 Millisekunden Okay. Jetzt können Sie diese beiden Callbacks auch hier erstellen lassen. Okay? Also hier kann ich Funktion sagen. Okay. Also funktioniere auf Erfolgskurs so und du kannst Daten hier drüben sagen. Okay. Und hier unten kannst du sagen, nicht bestätigen. Es sollte hier das Konsolenprotokoll sein, und du kannst sagen, Erfolg, okay. Und Sie können Daten auf die Konsole drucken lassen. Okay. Nun, dasselbe können Sie auch bei Fehlern duplizieren. Also kannst du bei einem Fehler sagen: Okay, so. Und statt Erfolg können Sie Fehler sagen und es werden die Daten angezeigt. Okay? Das sind also zwei Funktionen. Was Sie jetzt tun können, ist, wenn Sie dies aufrufen, wenn Sie die Fetch-Daten aufrufen Wenn Sie also sagen, Daten mit Erfolg und Fehler abrufen, können Sie bei Erfolg sagen, okay bei Erfolg , weil Sie zuerst den Erfolgs-Rückruf definiert haben , oder? Und dann bei einem Fehler, so etwas. Wenn Sie das jetzt speichern, sollten Sie sehen, dass kein Fehler gedruckt wird, da wir die Fehlersituation simuliert haben Sie können sehen, dass ein Fehler aufgetreten ist, oder? Sie können also sehen, und das wird gedruckt. Es ist ein Fehler aufgetreten, oder? Jetzt können Sie dieses Beispiel auf das Beispiel für eine anonyme Funktion aktualisieren . Zuallererst ist dies ein Beispiel für Erfolg und Fehler. Okay? Du kannst das auch randomisieren, also kann ich Math Dot Random verwenden Math Dot Random hier drüben. Okay. Wenn du Math Dot Random sagst, ist das eine Methode innerhalb von Math Object. Sie können also sehen, dass es mir Zufallswerte 0-1 gibt. Sie können es hier auf der Konsole sehen. Okay. Jetzt kann ich sagen, dass Math Dot Random weniger als 0,5 ist. Es gibt mir einen booleschen Wert, wahr, manchmal wahr, manchmal falsch Also kann ich diese Bedingung hier kopieren und hinzufügen lassen. Okay? Also dieser Fehler aufgetreten, der Zustand ist jetzt dynamisch, oder? Wenn ich das also speichere, können Sie den Fehler sehen, Sie können den Fehler sehen und Erfolg wird ziemlich dynamisch sein. Wenn ich es jetzt noch einmal speichere, jetzt war es eine Fehlersituation, kann es auch erfolgreich sein. Okay? Sie können Erfolgsdaten sehen, oder? Sie können das auf eine anonyme Funktion aktualisieren, sodass ich das hier kürzen kann. Okay. Du kannst es so sagen. Okay. Und dann hast du das hier drüben. Okay. Also das ist erledigt, okay? Und dann kannst du auch den Fehler eins haben. Jetzt kannst du auch Rückrufe verketten, okay? Also lass mich dir zeigen, wie du das machen kannst. Okay? Also verkettete Rückrufe. In Ordnung Nehmen wir an, ich habe eine Funktion. Okay, also ich werde diese Funktion hier haben. Okay. Lass mich das nennen. Oh, tut mir leid. Lass mich das kopieren. Also werde ich diese Funktion als Schritt eins aufrufen. Okay, es gibt einen Rückruf, ein Timeout. Und hier werde ich das Konsolenprotokoll hier drüben haben, dem steht, Schritt eins bis hierher. Okay, so etwas in der Art. Ich rufe an, ich habe auch hier einen Rückruf , der keinen Parameter akzeptiert Okay. Und statt 10.000 bleibe ich hier bei Tausend. Das ist also eine Funktion , die ich mit einem Callback habe. Das ist Schritt eins Nehmen wir an, ich habe einen zweiten Schritt. Also führe ich hier mehrere Operationen durch. Okay? Das ist Schritt zwei. Ich sage hier nochmal, das ist Schritt zwei. Okay. Ich komme wieder her. Ich sage, das ist Schritt drei, ungefähr so. Das ist wieder Schritt drei hier drüben. Okay. Also so hier drüben. Also, was ich tun kann, ist , Schritt eins zu sagen. Also der erste Stil heißt Schritt eins. Okay. In Schritt eins werde ich eine Pfeilfunktion wie diese haben, und hier kann ich Schritt zwei sagen. In der Pfeilfunktion sage ich also Schritt zwei. Schritt zwei benötigt nun einen Parameter. Stattdessen übergebe ich hier wieder eine Pfeilfunktion. Okay. Und dann hier drüben mache ich wieder Schritt drei, ungefähr so. Ich werde so etwas sagen. So und hier drüben, so. Okay. Und hier werde ich nur erwähnen, dass das Konsolenprotokoll abgeschlossen ist, okay? So etwas in der Art. Alles abgeschlossen. Ich sage Schritte, okay? Ich füge hier ein Semikolon hinzu. Und ich werde den Lebenslauf sehen, okay. Jetzt sehen Sie, dass Schritt eins erledigt, Schritt zwei erledigt, Schritt drei erledigt und alle Schritte abgeschlossen sind. Ordnung. Am Ende siehst du Erfolgsdaten, weil das Timeout viel länger war, ja Und dieser hatte auch ein längeres Timeout, oder? Aber hier kannst du sehen, dass Schritt eins, Schritt zwei und Schritt drei abgeschlossen wurden, okay? Und so können Sie eine Operation ausführen , die mehrere asynchrone Operationen beinhaltet, okay? Außerdem möchte ich hier noch eine Sache hervorheben, zum Beispiel diese Sache mit der Verkettung von Rückrufen, die auch als Callback-Hölle bekannt ist Wenn Sie also googeln oder etwas über JavaScript oder Callbacks lesen, werden Sie auf diesen Begriff namens Callbacks Hell stoßen , und genau das ist Dabei verketten Sie Callbacks oder erstellen eine Pyramide von Callbacks, wobei die Callbacks ineinander verschachtelt Sie sind also ineinander verschachtelt. Nun, das ist keine empfohlene Vorgehensweise, richtig, weil es auch schwieriger macht , den Code zu lesen und zu verwalten Also, wenn jemand morgen deinen Code liest, okay, es wäre schwer für ihn zu verstehen, was hier passiert, oder? Und wenn Sie mehr Call Wax oder mehr asynchrone Operationen haben , mehr APA-Codes, die Sie machen, dann wäre das noch schwieriger und Sie könnten als Entwickler sogar Fehler machen Stimmt das? Also ja, das ist Callback Hell Das ist keine empfohlene Praxis, aber ich möchte euch allen dieses Konzept erklären und beibringen, okay? Jetzt können Sie sogar Callbacks verwenden, okay, Callbacks mit Array-Methoden verwenden Okay? Arrays haben also einige gute Methoden, die hier nützlich sind. Okay? Lass mich dir das zeigen, damit ich hier Zahl sagen kann, oder ich sollte Zahlen sagen. Okay. Und ich habe eins, zwei, drei, vier, fünf und sechs, okay. Okay. Nun können Sie sagen, sagen wir, wir wollen verdoppeln oder wir wollen ein Array bekommen , in dem jede Zahl in diesem Array verdoppelt wird. Ich kann also sagen, lass die Zahlen verdoppeln, okay. Und hier drüben kann ich sagen, dass Zahlen gelernt sind. Okay, ich werde die Karte hier drüben haben, und hier sehe ich die Funktion. Ich werde eine Funktionsanweisung haben. Das wird keinen Namen haben. Sie können sogar eine Funktion mit Pfeilfunktionen erstellen, aber ich mache das auf diese Weise und Sie können sehen Zahlen in zwei zurückgegeben werden, ungefähr so. Du verdoppelst gerade die Zahl hier drüben. Okay? Und dann siehst du hier das Konsolenprotokoll. Okay, also sage ich hier einfach Log. Und du kannst doppelte Zahlen sagen, so etwas in der Art. Okay. Also jetzt, okay, wir bekommen die Fehlermeldung dass die Nummernreferenz nicht definiert ist. Okay? Also Funktionsnummern. Okay, das müssen also Zahlen sein. Oder du kannst es als Nummer bezeichnen, okay, nicht als Nummer. Numbers ist sowieso der Name des Arrays. Wenn Sie das also speichern, werden Sie sehen, das ist die Ausgabe. Okay? Also, was passiert ist diese Kartenfunktion Callback als Eingabe akzeptiert, okay, weil das auch eine Funktion ist und das ist auch eine Funktion Kannst du sehen? So funktioniert es also. Okay? Map Methods nimmt also eine Callback-Funktion und wendet sie auf jedes Element in den Arrays In Ordnung? Also ja, es geht um Rückrufe, alles Nun, zurück zur Theorie, okay? Was sind Rückrufe? Sie sind sich jetzt also ziemlich klar Callbacks sind eine Funktion , die als Argument an eine andere Funktion übergeben und ausgeführt wird, nachdem ein bestimmtes Ereignis oder eine bestimmte Operation abgeschlossen ist Sie ermöglichen es Ihnen also, die Reihenfolge der Ausführung zu kontrollieren, mehrere Aufgaben zu erledigen und auch auf Ereignisse zu reagieren, richtig Aber denken Sie daran, dass die übermäßige Verwendung von Rückrufen hier, wie wir gesehen haben, zur Callback-Hölle führen kann Okay, und das ist keine gute Praxis, oder? Also ja, das sind Rückrufe, und ich hoffe, das war nützlich 4. Versprechen aufgelöst: Saubereren und überschaubareren Async-Code schreiben: Jetzt ist es an der Zeit , dass wir über Versprechen sprechen und darüber , wie sie uns das Leben erleichtern können Wie die Definition hier drüben schon sagt, bieten Versprechen eine sauberere und strukturiertere Art, asynchrone Operationen zu handhaben Was diese Methoden sind, darüber werden wir natürlich sprechen. Aber zuerst wollen wir verstehen, was Versprechen sind. Wenn Sie also asynchrone Operationen ausführen, besteht eine Möglichkeit, sie zu erledigen, in Rückrufen Wenn ich also hier einen Code bezahle, ist das ein asynchroner Vorgang, und ich verwende Callbacks hier drüben ist das ein asynchroner Vorgang, und ich verwende Callbacks Sie können also sehen, dass dies eine Funktion ist , die die Operation ausführt Ich akzeptiere einen Parameter namens Callback, und ich habe diese asynchrone Operation, bei der Sie davon ausgehen können , dass ich einige Daten vom EPI abrufe, und das sind die Daten , die ich erhalte Es ist ein Objekt. Und dann rufe ich diese Callback-Funktion hier auf, sobald diese Daten abgerufen wurden, oder? Nun, diese Callback-Funktion ist eigentlich diese Funktion , die übergeben wird Wenn ich also G Data aufrufe, übergebe ich diese anonyme Funktion mit Hilfe der Pfeilfunktionssyntax, und Sie können sehen, dass sie aufgerufen wird sobald Get data fertig ist Wenn ich das also speichere, werden Sie nach 1 Sekunde sehen, dass diese Daten auf die Konsole gedruckt werden. Das sind also Rückrufe, aber Promises ist ein besserer Ansatz, wenn Sie mit asynchronem Betrieb arbeiten, oder? Denn wenn Sie viele asynchrone Operationen ausführen, kann Callback zu einer Callback-Hölle führen , in der es für Sie schwierig sein könnte , verschiedene Callbacks zu verwalten, wenn Sie verschiedene Callbacks zu verwalten, wenn Sie sie ausgiebig verwenden, oder? Versprechen sind also ein besserer Ansatz. Lassen Sie mich dieses Beispiel nun in ein Beispiel mit Versprechen umwandeln , okay? Also werde ich dasselbe Beispiel schreiben in dem ich diese JCN-Daten tatsächlich von, sagen wir, einem Server erhalte , und ich werde das mit Hilfe von Versprechen tun, okay? Also kopiere ich zuerst diese Funktion, okay? Und ich werde diesen Teil hier loswerden, denn das werden wir ändern. Anstatt dieses Timeout zu haben und dann einen Rückruf durchzuführen oder diese Callback-Funktion aufzurufen, werde ich das jetzt einen Rückruf durchzuführen oder diese Callback-Funktion aufzurufen, werde ich das Ich sage, neues Versprechen zurückgeben, okay? Ich verspreche es, so etwas. Okay. Nun, wenn Sie den Mauszeiger drüber bewegen, lassen Sie mich sehen, ob wir eine Dokumentation bekommen Okay, das kannst du hier sehen. Also das ist ein Versprechen, okay? Und du wirst hier so viel versprochen haben, dass du eine Veranstaltung haben wirst, okay? Also hier drinnen werde ich eine Pfeilfunktion haben , um so etwas zu finden. Okay. So wie. In Ordnung, und ich füge hier ein Semikolon Okay. Nun, dieses Versprechen benötigt diese Funktion, und innerhalb dieser Funktion benötigen Sie zwei Parameter. Nun, was sind diese Parameter? Einer wird Resolve sein, und der andere wird der Name Rechect hier drüben Okay? Also, warum haben wir Entschlossenheit und warum haben wir Recht? Nun, wann immer Sie eine asynchrone Operation ausführen, können zwei Zustände auftreten Der eine ist, dass der asynchrone Vorgang erfolgreich war. Und der zweite Zustand kann sein, dass der asynchrone Vorgang, den Sie ausgeführt haben, nicht erfolgreich war Okay? Also hier, wenn Sie ein bisschen Dokumentation sehen, werden Sie sehen, dass Sie zwei Argumente oder einen aufgelösten Rückruf haben. Gelöst bedeutet, dass die Operation erfolgreich war Resolve ist also nur ein Begriff, der verwendet wird, um zu sagen, dass der Rückruf oder was auch immer die Operation ausgeführt hat, erfolgreich war o und reject, was bedeutet, dass der Fehler aufgetreten ist oder aus irgendeinem Grund die Operation nicht erfolgreich war Wir haben hier also zwei Rückrufe , nämlich Resolve und Okay? Also, was wir hier machen werden, ist, dass ich die Logik habe. Hier kommt der asynchrone Betrieb zum Einsatz. Also, was ist meine asynchrone Operation? Ich nehme diese asynchrone Operation und füge sie hier hinzu. Okay? Nun, noch eine Änderung, die wir vornehmen müssen, ist wir einen Rückruf anrufen, richtig? Also werde ich den Rückruf hier loswerden . Wir brauchen keinen Rückruf Und statt Rückruf sage ich Entschlossenheit. Hier drüben, so etwas. Also, sobald die Operation abgeschlossen ist, sage ich, lösen Sie diesen speziellen Rückruf . Das ist es, was ich tue. Okay? Und Resolve wird aufgerufen, und dann, wer auch immer der Anrufer ist, dort können wir die nächsten Schritte durchführen Also, was ich hier tun kann, ist , Daten abrufen zu sagen, einfach so Okay, also ich rufe Get Data an. Aber jetzt ist das eine Gegenleistung für ein Versprechen, oder? Also kann ich Punkt sagen. Also, es gibt zwei Methoden , über die Sie sich im Klaren sein müssen und die Sie hier anwenden müssen. Okay. Also, was ist dann? Wenn Sie dann warten, sehe ich vielleicht Ihre Unterlagen. Okay, ich sehe sie nicht. Aber dann ist es tatsächlich die erfolgreiche Erfüllung dieses Versprechens. Okay? Und wenn du Fehler behandeln willst, dann musst du das im Cache machen. Also hier siehst du, Data, und ich werde hier eine Pfeilfunktion haben, ungefähr so, und ich sage hier logge. Okay, und ich sage Daten, so etwas in der Art. Okay. Und dann kann ich das Gleiche hier drüben kopieren. Anstelle von Tita kann ich hier einen Fehler sehen, so wie hier. Und anstelle des Punktprotokolls für die Konsole kann ich den Fehler in diesem Format protokollieren und speichern Okay? Und Sie können die Ausgabe hier sehen. Okay? Du siehst also, die Ausgabe, die ich erhalte, ist nur eine. Idealerweise sollte ich zwei bekommen, einen für diesen und einen für diesen Aber es scheint ein Problem zu geben , weil die Funktionsnamen hier gleich sind. G-Daten, Daten abrufen, überall Daten abrufen. Okay. Also rufe ich das an, hole Daten. Okay. Ich werde es hier mit Versprechen sehen, so etwas. Okay. Und anstatt hier Get Data anzurufen, sage ich Get Data with Promise. Ordnung? Also, jetzt gibt es hier eine Art Trennung in den Namen. Das heißt Daten abrufen, und das ist vielversprechend. Und wenn Sie das speichern, werden Sie sehen dass dieser von der ersten ist und dieser von der zweiten. Okay? Also es funktioniert absolut einwandfrei, und Sie können sehen, was hier passiert ist. Okay? Also haben wir diese Funktion definiert, Daten mit vielversprechendem Ergebnis zu erhalten , hier drüben. Das ist also eine Rückkehr. Es ist jetzt eine Antwort auf ein Versprechen. Stimmt das? Jetzt, im Promise-Konstruktor Wenn wir also dieses Versprechen aufrufen oder dieses Versprechen erstellen, simulieren wir in diesem Konstruktor einen asynchronen Datenabrufvorgang Datenabrufvorgang Okay, welche Operation auch immer Sie ausführen, sie wird in den Konstruktor übernommen, das müssen Sie im den Konstruktor übernommen, das müssen Sie Okay. Nun, sobald die Daten hier abgerufen wurden, okay? Sobald die Daten abgerufen sind, rufen wir hier Resolve an. Okay. Nun, hier wird die Resolve-Funktion aufgerufen , um das Versprechen mit den Abrufdaten zu erfüllen. Wir geben die Daten also auch weiter, weil wir dieses Versprechen jetzt mit den abgerufenen Daten erfüllen wollen . Und was dann passiert, ist, wenn du hier drüben Get Data with Promise anrufst , okay? Du nutzt sie und fängst hier drüben an. Dies sind also zwei Methoden , die Ihnen helfen können, mit der erfolgreichen Erfüllung des Versprechens oder dem Scheitern des Versprechens umzugehen der erfolgreichen Erfüllung des . wird also verwendet, um die erfolgreiche Erfüllung zu gewährleisten. Also hier, wenn Sie nach oben scrollen, wenn das Versprechen erfüllt ist , und nachschauen, wann das Versprechen abgelehnt wird. Sie können also sehen, ob ein Fehler vorliegt, das Versprechen abgelehnt wird, dann wird der Cache ausgeführt. Okay? Sie können also sehen, dass dies die Syntax von Promise ist, und auf diese Weise bieten sie eine sauberere und strukturiertere Methode, asynchrone Operationen in JavaScript zu handhaben asynchrone Operationen in JavaScript Ordnung. Denken Sie nur daran, dass die Operation , die Sie ausführen möchten, okay, hier im Konstruktor ausgeführt wird Sie können das Ganze hier sehen, das Ganze ist im Promise-Konstruktor Okay? Also das ist das Versprechen. Und wenn ich dann Control, C, sehe, können Sie sehen, dass das Ganze im Konstruktor läuft im Konstruktor läuft Das solltest du im Hinterkopf behalten. Jetzt wird diese Definition etwas kompliziert, weil sie nur besagt, dass sie eine sauberere und strukturiertere Methode zur Handhabung dieser Synchronisierungsvorgänge bietet eine sauberere und strukturiertere Methode . Okay? Sie können sich Versprechen also auch so vorstellen, dass Versprechen tatsächlich einen Wert darstellen , der jetzt verfügbar sein könnte. Es kann in Zukunft verfügbar sein oder vielleicht nie verfügbar sein , denn wenn es jetzt verfügbar ist , okay, es ist verfügbar. Wenn es nicht verfügbar ist, wird es abgerufen, oder? Das ist also ein Staat. Und wenn es nie verfügbar ist, bedeutet das, dass ein Fehler aufgetreten ist. Das sind also die drei Staaten , die normalerweise ein Versprechen hätte. Stimmt das? Also ja, das ist ungefähr das Versprechen. Nun, lassen Sie mich Ihnen hier auch das Fehlerszenario zeigen . Okay, also was ich tun werde, ist , hierher zu kommen. Ich werde diesen Code hier mit Versprechen duplizieren und einen Doppelpunkt hinzufügen. Ich werde hier Erfolg und Misserfolg sagen , ungefähr so. Ich werde das alles als eins bezeichnen. Eine, die einfach den Funktionsnamen unterscheidet , damit es keine Konflikte als solche gibt Okay? Also arbeiten wir jetzt damit, eins. Okay. Also hol dir Daten mit Promise One. Also, sagen wir mal, ich habe eine Erfolgs- eine Erfolgs- oder Misserfolgsrate definiert. Okay. Also innerhalb der Zeit kann ich sagen, lass uns Erfolg Okay, ich werde also eine Erfolgsquote von 50% haben. Also sage ich hier Mathe Dot Random. Und wenn Mathe Random weniger als 0,5 ist, okay? Also wird es wahr oder falsch ergeben. Der Erfolg wird also boolescher Wert haben, egal ob er wahr oder falsch ist, oder Und dann hier drüben, was ich tun kann, ist Aussage hier drüben zu sagen, okay Und ich kann sagen, ob es erfolgreich war. In Ordnung, dann bekommen wir diese Daten, sozusagen. Ich werde das reinbringen. In Ordnung. Und wenn es nicht erfolgreich ist, dann habe ich hier einen S-Block. Okay. Und innerhalb von mir kann ich sagen: Ablehnen. Okay? Also lösen , wofür ist Entschlossenheit? Entschlossenheit bedeutet, das Versprechen einzulösen. Bedeutet, dass der Datenabruf erfolgreich war Bitte lösen Sie dieses Versprechen Wenn nun ein Fehler aufgetreten ist, rufen Sie hier Reject auf und geben eine Nachricht weiter. Sie können eine Nachricht weiterleiten. Sie können hier einen beliebigen Grund wie einen Fehler und einen Grund angeben . Also sage ich einfach einen Grund. Okay. Sie können den Grund je nach Szenario hinzufügen, in Ordnung. Aber so wird es sein, okay? Aber ich habe FLs und sonst gibt es nichts. Okay? Also, wenn du das speicherst, damit du hier Erfolg hast. Wenn Sie das erneut speichern, schauen wir mal, aus irgendeinem Grund können Sie einen Fehler sehen. Diese Bedingung ist also fehlgeschlagen und Sie erhalten hier eine Fehlermeldung. Also dieses Versprechen ist tatsächlich gescheitert. Okay? So können Sie also mit Erfolgen und Misserfolgen umgehen. Okay? Also, wenn Sie ein Szenario haben wollen , wir haben dieses Szenario nicht behandelt, wir haben nur das Ergebnis genannt. Okay? Also hat es sich einfach um das Ergebnis gekümmert. Aber wenn es jetzt einen Fehler oder etwas Ähnliches , könnten Sie zum Beispiel die Daten überprüfen , die Sie vom Server erhalten. Wenn die empfangenen Daten Null sind, könnten Sie „Ablehnen“ sagen und es liegt ein Fehler vor. Okay? Also in diesem Fall, wenn Reject aufgerufen wird, dann wird der Cache zufällig hier ausgeführt, und was auch immer sich im Cache befindet , wird ausgeführt. In Ordnung. Also ja, das ist ein vielversprechendes Beispiel für Erfolg und Misserfolg. Jetzt wird es bei der Arbeit mit Versprechen Szenarien geben , in denen Sie vielleicht einen Code ausführen möchten, unabhängig davon ob das Versprechen erfüllt oder abgelehnt wurde, oder? Also in diesem Fall hast du das endlich, okay? Du kannst sagen, endlich hier drüben. Okay. Und auf ähnliche Weise, als ob Sie die anderen beiden Dinge definiert hatten, können Sie Console Dot Log, O sagen und Sie können endlich sagen. Okay. Ich würde einfach diese Nachricht hinzufügen. Okay? Du kannst hier jede Art von Nachricht haben. Dies wird also unabhängig davon ausgeführt , ob ein Erfolg oder ein Fehler vorliegt. Also, wenn ich das speichere, wirst du es endlich sehen, okay? Und Sie können sehen, dass es einen Fehler gibt. Okay? Wenn ich das noch einmal speichere , okay, ich erhalte dieselbe Ausgabe. Okay, das ist wieder ein Fehlschlag. Du kannst sehen, dass es diesmal ein Erfolg ist, und du wirst es endlich auch. Okay? Also ist endlich auch Teil. Aber ja, die Hauptsache löst sich dann und ich fange hier drüben Okay? Lassen Sie mich Ihnen jetzt noch ein Szenario zeigen, okay, in dem Sie vielleicht mehrere Versprechen zusammen haben möchten . Nehmen wir also ein Beispiel, bei dem wir mehrere Versprechen parallel ausführen möchten. Okay? Also kannst du hier mehrere Versprechen sagen. Okay. Lassen Sie mich jetzt mehrere Versprechen abgeben. Ich sage, lass uns eins versprechen. Okay? Wie würdest du das schaffen? Du rufst einfach Fetch Data mit Versprechen an, okay? Also Daten mit Versprechen abrufen. Okay. Lass mich das kopieren. Okay, es ist kein Abrufen, sondern das Abrufen von Daten mit einem Versprechen. Das tut mir leid Okay. Also ja, ich nenne das, okay. Und bei diesem Aufruf wird es ein Promise-Objekt zurückgeben. Okay, das hole ich mir hier drüben. Okay? Also das ist eins, das sind zwei und das sind drei. Ich muss das umbenennen. Es werden zwei sein, und das sind drei. Ordnung. Also wurden drei Versprechen geschaffen Nehmen wir nun an, ich möchte, dass all diese drei Versprechen parallel ausgeführt werden. Was ich also tun kann, ist hier Versprechen zu sagen, Punkt A. Sie können sich das alles ansehen. Und hier können Sie ein Array mit Versprechen eins und Versprechen zwei übergeben . Und versprochen drei, so etwas wie das hier drüben. Okay. Und dann hier drüben, du kannst sagen , dann, so, und du kannst die Ergebnisse hier haben. Okay? Also, wenn das erledigt ist, sagen wir, ich möchte das tun. Okay. Also nehme ich das und statt du kannst sagen, alles erledigt. Okay. Also werde ich diese Nachricht fertig machen lassen, ungefähr so. Okay? Oder du kannst auch einen Cache hinzufügen, damit ich ihn hierher kopieren kann. Okay. Und hier kann ich einen Cache hinzufügen. In Ordnung. Und das wird mit einem Semikolon enden. Also kann ich das speichern. Und du wirst sehen. Also diese beiden werden hingerichtet, okay? Und warte. Lassen Sie mich diese beiden Anrufe loben, weil wir jetzt viele Anrufe tätigen, okay? Vielleicht bekommst du zwischendurch ein Konsolen-Log oder lass mich hinzufügen. Okay. Also was ich tun würde, ist dieses Konsolenprotokoll hierher zu kopieren. Okay. Und hier würde ich sagen, mehrere. Etwas wie das hier. Okay. Jetzt würden Sie also sehen, dass mehrere gedruckt werden. Okay? Okay, es ist eigentlich ein asynchroner Anruf, oder? Also wird es in der ersten Ausgabe gedruckt. Okay. Was ich tun müsste, ist, diese Anrufe zu deaktivieren. Ich denke, das wäre das Beste. Okay? Also hoops, würde das auch deaktivieren Okay. Und ich würde diesen mit Erfolg und Misserfolg deaktivieren. So wie es ist. Okay. Und ich werde sehen, ob das ist. Okay. Jetzt können Sie sehen, dass dieser abgelehnt wurde. Okay. Also ich erhalte diesen Fehler. Lassen Sie mich das Erfolgsszenario hier erläutern. Okay. Also ich erhalte nur eine Fehlermeldung. Okay. In Ordnung, Sie können also sehen, wie alles hier gemacht wurde. Und alle drei Versprechen waren erfolgreich. kannst du hier sehen. Okay. Also so ist es. Sie können hinzufügen, wenn Sie möchten. Wir haben keine benutzerdefinierte Nachricht für den Fehler hinzugefügt. Sie können sehen, dass mindestens ein Versprechen nicht bestanden hat. Okay? Und wenn du das speicherst, wirst du sehen, dass mindestens ein Versprechen gescheitert ist. Eine Sache, die ich hier erwähnen möchte, ist, wenn ein Versprechen nicht eingehalten wird, okay, dann werden auch die anderen als nicht bestanden markiert. Jeder scheitert, wenn jemand versagt, können Sie sehen, das können Sie in der Ausgabe hier sehen. Jeder scheitert also, und das ist der Grund, warum Sie diesen Fehler als Ergebnis erhalten. Nun, wenn ich das noch einmal durchführe, okay, lass mich das sagen. Sie können jetzt sehen, dass alle drei erfolgreich ausgeführt wurden. Sie sehen also alles erledigt als Ausgabe. Okay? In ähnlicher Weise gibt es noch eine, äh, noch eine Methode, die besagt, dass es sich um die Rennmethode handelt. Okay? Jetzt wird es also ein Szenario geben dem Sie das Ergebnis abrufen oder das erste vereinbarte Versprechen finden wollen abrufen oder das erste , oder? In diesem Fall können Sie also Promise Dot As sagen, und als ob Sie die ganze Reihe von Versprechen hier gehabt hätten , können Sie das tun. Okay. Und Sie können eine ähnliche Syntax haben. Also anstatt, äh, anstatt alles zu nutzen , benutzt du hier Strahlen. Das ist es, okay? Und du kannst sehen, wie das erledigt ist, okay. Und hier kannst du Rennen sehen. Also werde ich einfach überall eine Serie erwähnen, damit wir wissen, dass diese Ausgabe von s ist. Okay. Ich werde das speichern. Damit du den sehen kannst, während das erledigt ist. Also dieser wurde hier hingerichtet. Das ist von Race. Okay. Sie können also einen Fehler sehen, bei dem Versprechen nicht bestanden wurde, und selbst wenn ein Versprechen nicht eingehalten wurde. Okay? Also ja, so funktioniert Rays and Promise, okay. Rasse wird dir im Grunde das Machtversprechen geben , das sich auflöst, und alles wird dir helfen alle Versprechen gleichzeitig auszuführen oder zu erfüllen Okay. Also das sind Versprechen, und ich hoffe, das war klar. Kurz gesagt, Versprechen bieten eine sauberere Methode und einen strukturierteren Ansatz, um einen synchronen Vorgang abzuwickeln, okay? Dann fangen Sie ein und schließlich sind einige der Methoden, die Sie verwenden können, okay? Und das sind die Methoden, die dir helfen, mit Versprechen zu arbeiten. 5. async/await: Der moderne Weg, asynchrones JavaScript zu handhaben: Jetzt ist es an der Zeit, über Async Await zu sprechen. Jetzt helfen uns Async und Await dabei, unseren asynchronen Code noch weiter zu vereinfachen Nun, hier drüben habe ich bereits ein Beispiel geschrieben, in dem ich diese Funktion habe, die ein Versprechen zurückgibt, okay? Und innerhalb des Versprechens haben wir tatsächlich diesen asynchronen Code, bei dem ich hier eine Verzögerung von 1.000 Millisekunden simuliere von 1.000 Millisekunden Und ich habe hier eine Erfolgsquote von 50%, zufällig ausgewählt, und sie können hier Erfolg oder Misserfolg sein, okay Und ich mache mir das so zunutze. Wenn also ein Versprechen erfüllt ist, dann wird es verwendet, und wenn nicht, wenn es einen Fehler gibt, dann verwenden wir catch. Das ist also die Syntax bei der Arbeit mit Versprechen. Das Problem hier ist , dass es immer noch nicht lesbar ist. Die Art und Weise, wie Sie das konsumieren, ist nicht lesbar. Und mit Hilfe dieser beiden Schlüsselwörter können Sie dies noch weiter vereinfachen. Alles klar? Also lass mich dir ein Beispiel geben, also werde ich das einfach kommentieren , okay? Was ich tun kann, ist, sagen wir, ich möchte das konsumieren, Daten abrufen. Also ich kann hier Funktion sagen und ich sage Daten abrufen oder Daten abrufen, nennen wir es, und ich rufe es synchron ab und ich sage Daten abrufen oder Daten abrufen, nennen wir es, und ich rufe es synchron Okay. Nun, was ich sagen kann, ist, dass ich sagen kann, Daten lassen und ich kann sagen, Daten hier abrufen. Okay. Also Daten abrufen ist der Name unserer Funktion hier drüben. Okay? Also nenne ich das auch Get Data statt Fetch Data. Okay? Also ich habe es jetzt so, und lassen Sie mich auch diese Log-Anweisung hier hinzufügen, Console Dot Log, in der ich Daten ausdrucke. Lassen Sie uns jetzt natürlich sehen, was die Ausgabe hier drüben ist. Okay. Also bekommen wir hier nichts. Okay? Also würde ich diese Funktion aufrufen. Okay, ich habe vergessen, diese Funktion kurz aufzurufen. Okay. Ich würde sehen, ob das. Okay, du bekommst jetzt also ein Versprechen, okay? Du bekommst das Ergebnis nicht, okay? Wie würdest du das Ergebnis bekommen? Um das Ergebnis mit Async und dem Schlüsselwort await zu erhalten, können Sie Async wie folgt verwenden und hier await hinzufügen. So wie. Okay. Und du würdest die Daten jetzt bekommen, kannst du sehen? Ordnung. Also das ist Syntax, ziemlich lesbar und ziemlich viel einfacher als diese. Alles klar? Also das ist immer noch nicht lesbar, und dieses Ding vereinfacht es noch weiter. Okay? Nun, ein Waschbecken und ein Gewicht hängen voneinander ab. Wenn Sie versuchen, eine Spüle zu entfernen und zu speichern, werden Sie sehen, dass Awight nur gültig ist, wenn eine Spüle funktioniert Sie benötigen also eine Spüle. Wenn du versuchst, Await hier zu entfernen und wenn du versuchst, das zu speichern, bekommst du eine Zusage und du kannst sehen, dass es sich um einen Fehler handelt. Okay? Also musst du hier beide nutzen, um die richtige Ausgabe zu bekommen, richtig. Und Sie können hier sogar eine Fehlerbehandlung durchführen. Sie können also die Fehlerbehandlung verwenden. Sie können die Fehlerbehandlung mit Hilfe von Simple Try Catch durchführen, und welchen Fehler Sie auch immer erhalten, Sie können ihn auf diese Weise protokollieren, etwa so. Und Sie können diesen Code hineinverschieben. Okay. Und hier kannst du sagen, ich kann Fehler hinzufügen. Etwas wie das. Okay. Nun, wenn es hier einen Fehler gibt, würdest du diese Fehlermeldung sehen. Okay? Sie können Fehler und Irrtum aus irgendeinem Grund sehen. Ordnung. Nun, der Vorteil der Syntax ist einer, sie ist lesbar. Okay? Und der Vorteil ist, dass Sie mehrere asynchrone Operationen parallel ausführen können mehrere asynchrone Operationen parallel ausführen Okay? Also kann ich noch einen hier haben. Okay. Also lass uns das so nennen wie lass uns das hier drüben als eins nennen. Okay? Ich sage, das ist einer. Okay. Und dieses Ding werde ich hier hinzufügen. Ich sage, das sind zwei. Okay. Und ich ändere schnell den Variablennamen hier drüben. Ich sage, das ist Daten eins. Das sind Daten zwei. Das werden Daten eins, Daten zwei, lassen Sie mich das speichern und lassen Sie uns sehen. Sie können sehen, dass das ein Fehler ist. Nun, ein Versprechen ist gescheitert, oder? Also wurde das ausgeführt. Der Rest des Blocks wurde nicht ausgeführt. Aber wenn ich das noch einmal ausführe, siehst du einen und dann ist das zweite Versprechen gescheitert. Eines wurde ausgeführt, aber das zweite Versprechen schlug fehl. Zuvor war das erste Versprechen gescheitert. Lass mich das nochmal speichern. Du wirst eins und zwei sehen. Diesmal waren beide erfolgreich, oder? Sie können parallele Operationen wie diese durchführen, und wie Sie hier sehen können oder können ist es ziemlich einfach zu verstehen und die Syntax ist auch einfach. Okay? Da ist nichts Kompliziertes dabei. Okay? Also kannst du zuerst ein Feld sehen. wird also natürlich nichts In diesem Block wird also natürlich nichts ausgeführt, oder? Also werde ich das nochmal speichern. Lass uns sehen. Okay. Aber lassen Sie mich stattdessen so nennen oder lassen Sie mich die Erfolgsquote auf sagen wir 90% erhöhen. Eins, zwei und drei. Ich erhöhe also die Erfolgsquote, und Sie können sehen, dass alle drei erfolgreich waren, oder? Also so funktioniert es, und was die Dokumentation angeht, ich denke, Await vereinfacht den asynchronen Code, indem es ihn wie synchronen Code aussehen Es sieht also aus wie synchroner Code, normales Javascript, okay, einfacher zu lesen und einfacher zu Und selbst aus Gründen der Größe ist das ziemlich einfach, oder? Die Leute können leicht erkennen, was passiert, okay? Mit Hilfe von Await sagen wir also, warten Sie, bis dieser Vorgang abgeschlossen ist, da es sich um einen asynchronen Vorgang handelt Also wartet es, es beendet es und dann wartet es darauf, dass es abgeschlossen ist Ich beende das, dann wartet es, bis es abgeschlossen ist. Und weil wir Await verwenden, müssen wir diese Funktion hier als Senke kennzeichnen Okay? Es verbessert also die Lesbarkeit und erleichtert die Fehlerbehandlung mit Try Catch Hier mussten Sie also den Cache verwenden, genau dann und fangen Hier drüben ist es ziemlich einfach, wie Standard-JavaScript, versuchen und zwischenspeichern, okay? Und Sie können Asyncad für mehrere synchrone Operationen, HTTP-Anfragen und mehr verwenden. In Ordnung. Also all das ist möglich, und es ist erstaunlich, dass diese Dinge häufig verwendet werden Wenn Sie also JavaScript-Code überprüfen oder wenn Sie viel mit EPIs arbeiten, was Sie natürlich tun werden, da Sie JavaScript lernen, okay, Sie werden diese beiden Schlüsselwörter oft sehen Ordnung. Also diese beiden sind wichtig. Also, wenn du etwas weiter in Javas Crave einsteigen willst, dann solltest du Dinge wie React und all das verwenden, alles klar, diese Await and a sink etwas, das du wirklich gut verstehen solltest Ordnung? Also ich hoffe, das ist nützlich und ich hoffe, Sie konnten mitmachen. 6. Schlussbemerkung zum Kurs: Nun, herzlichen Glückwunsch. Sie haben die Beherrschung von asynchronem JavaScript abgeschlossen, und ich hoffe, Sie haben während dieser gesamten Reise viel gelernt während dieser gesamten Reise viel Ich hoffe, Sie fühlen sich viel sicherer in Ihrer Fähigkeit, asynchrone Operationen mithilfe von Konzepten wie Callbacks, Promises und Async Await zu handhaben asynchrone Operationen mithilfe von Konzepten wie Callbacks, Promises Und ich hoffe, dieser Kurs hat Ihnen eine neue Perspektive gegeben , wie Sie JavaScript-basierten asynchronen Code schreiben können JavaScript-basierten asynchronen Code schreiben um Operationen wie Datenbankaufrufe, EPI-Aufrufe und andere Dinge zu verarbeiten EPI-Aufrufe Nun, hier ist eine kurze Zusammenfassung dessen, was wir gelernt haben. Wir haben Rückrufe behandelt. Wir haben etwas über Versprechen gelernt und gelernt, wie Sie dieses moderne Konzept nutzen können , um asynchrone Operationen in JavaScript zu schreiben asynchrone Operationen in Und wir haben auch etwas über ANC und Await gelernt und verstanden, wie Sie sie nutzen können Ich hoffe, dieser Kurs hat Ihnen gute praktische Erfahrungen vermittelt, da wir keine Präsentationen verwendet haben. Es war alles streng auf IDE beschränkt. Und ich weiß, dass Entwickler wie Sie immer lieben oder es vorziehen, zu programmieren und den Editor immer vor sich zu haben , weil das die echte praktische Erfahrung bietet , bevor Sie mit der Arbeit an realen Projekten beginnen . Jetzt, nach Abschluss dieses Kurses, möchte ich Sie dringend ermutigen, weiter zu üben und die Konzepte, die Sie im Laufe der Zeit gelernt haben, in Ihren Projekten , an denen Sie gearbeitet haben, anzuwenden die Sie im Laufe der Zeit gelernt haben . Vielen Dank, dass Sie eine so engagierte Gruppe von Lernenden Dieser Kurs beinhaltet ein Klassenprojekt, das Sie im Projektbereich dieses speziellen Kurses finden dieses speziellen Kurses Ich würde dir wärmstens empfehlen, das Projekt abzuschließen und es mit der gesamten Klasse zu teilen, um mehr Feedback zu erhalten. Damit sind wir am Ende angelangt, und ich wünsche Ihnen alles Gute für die JavaScript-Projekte, an denen Sie arbeiten.