Meistere auf einfachste Weise Asynchrones JavaScript | Rückruf, Versprechen, Async/Await

1. Einführung: Willkommen in der asynchronen JavaScript-Klasse. In diesem Kurs lernen wir Callbacks, Promises und Async Await kennen, die die wichtigsten Themen für JavaScript-Entwickler sind , insbesondere für diejenigen, die Master, React oder Nodes wollen. Wenn diese Konzepte geklärt sind, können Sie leicht andere Konzepte in React und node lernen . Ja, Sie erhalten alle Ressourcen für die Übung und die Ziffer dieser Konzepte im Abschnitt Projekte. Verschwenden wir also keine Zeit und fangen an. 2. Synchrone vs Asynchronous: Lassen Sie uns zunächst den Unterschied zwischen synchron und asynchron verstehen . Also hier erstelle ich die Datei index.html. Und in diesem JavaScript-Ordner haben wir die Datei script.js. Und ich habe diese JavaScript-Datei mit unserer HTML-Datei verknüpft. Kopieren wir nun diesen HTML-Dateipfad und fügen ihn in den Browser ein. Und lass uns die Konsolenrate öffnen. In dieser JavaScript-Datei schreibe ich jetzt die erste Zeile von console.log. Danach eine weitere console.log letzte Zeile. Das ist also das Beispiel für synchronen Code oder Sperrcode. Denn wenn diese erste Zeile ausgeführt wird, blockiert der Code. Und diese letzte Zeile muss warten, bis diese erste Zeile die Aufgabe beendet hat. Auf der anderen Seite sah asynchrones oder nicht blockierendes Programm. Lassen Sie mich Ihnen das Beispiel von asynchronem Code zeigen. In JavaScript. Wir haben eine Funktion namens setTimeout. Jetzt ist das erste Argument function und das zweite Argument ist Zeit für Verzögerung. Sagen wir zweitausend Millisekunden, das sind zwei Sekunden. Nach zwei Sekunden wird diese Funktion ausgeführt. Stellen Sie sich vor, wir bekommen Daten aus der Datenbank, was zwei Sekunden dauert. Kannst du jetzt erraten, was wir in der Konsole bekommen? Mal sehen. Also aktualisiere ich die Seite und sehe, dass wir erste und die letzte Zeile bekommen. Und nach zwei Sekunden bekommen wir die Daten aus der Datenbank. Zuallererst wird diese erste Zeile ausgeführt. Dann rufen wir diese setTimeout-Funktion auf. Diese Funktion plant eine Aufgabe, die in Zukunft ausgeführt wird. Dies blockiert das Ziel nicht, und deshalb nennen wir es als nicht blockierenden oder asynchronen Code. Wenn wir diesen Code ausführen, erhalten wir diese erste Zeile, dann sofort die letzte Zeile. Und dann, nach zwei Sekunden, bekommen wir diese Zeile. Lassen Sie uns das anhand des Beispiels aus dem wirklichen Leben verstehen. Hier ist ein Ein-Restaurant. Der Kellner kommt zu Tisch eins und nimmt Bestellungen von ihnen entgegen. Nun gibt der Kellner diese Bestellung an die Küche und geht dann zu Tisch 2 oder einer anderen Bestellung. Es gibt also einen Prüfer, der mehr Kunden bedienen kann. Das ist also das Beispiel von asynchron. Das ist ein weiteres Restaurant-Ray-Diagramm um einen Tisch zu geben und die Bestellung von ihnen entgegenzunehmen. Jetzt gibt der Kellner diese Bestellung an die Küche und wartet dann darauf, dass der Code fertig ist. Er nimmt keine Bestellung von einem anderen Tisch entgegen. Also wird das Restaurantsystem aus diesem Grund blockieren. Und dies ist das Beispiel für Blogging oder synchronen Score. Synchron oder asynchron ist also die Art von Code. Lassen Sie uns dieses Beispiel nun realistischer gestalten. Also erstelle ich eine Funktion namens get student und verschiebe diese Timeout-Funktion hinein. Diese Funktion gibt hier Daten des Studentenobjektnamens Bob und einer ID zurück Daten des Studentenobjektnamens . Rufen wir nun diese Funktion hier auf und speichern diesen Wert in einer Variablen namens student. Und danach protokollieren wir einfach die Studentin Sylvia, in der Annahme, dass wir Daten aus der Datenbank erhalten. Und es dauert zwei Sekunden, speichern Sie dies und aktualisieren Sie die Seite. Sehen Sie, wir erhalten diesen Schüler als undefiniert, da diese Funktion nach zwei Sekunden ausgeführt wird. Wenn wir also diese Funktion aufrufen, diese geschriebenen Daten nicht verfügbar. Wenn wir einen Wert von dieser Funktion zurückgeben wollen, dann haben Sie hier die richtige return Anweisung. Aber das wollen wir nicht weil wir Daten aus der Datenbank erhalten. Und es kann noch einmal dauern, diese Sekunde oder mehr als das. Deshalb verwenden wir setTimeout, um bei dieser Aufgabe eine Verzögerung hinzuzufügen. Also, wie können wir diese Schülerdaten hier bekommen? Es gibt also drei Methoden , um asynchronen Code zu verarbeiten. Callbacks, Promises und Async erwarten Sie. Fangen wir also mit Rückrufen an. 3. Callbacks: Was als Callback bezeichnet wird ist eine Funktion, die ausgeführt wird. Ich habe eine andere Funktion ausgeführt, die Ausführung abgeschlossen. Mit anderen Worten, jede Funktion, die wir als Argument an eine andere Funktion übergeben. Also nennen wir diese Funktion als Callback. Lass es mich dir zeigen. Also füge ich hier einfach id-Parameter hinzu und kaufe diese ID hier. In der Funktion übergeben wir eine, die ich vergessen habe hinzuzufügen. Um Callback anzuwenden, müssen wir also die Funktionsdefinition eines kleinen Gens vornehmen. Also füge ich hier Argument hinzu, das zurückgerufen wurde. Jetzt ist dieser Callback Funktion. Also rufen wir diese Funktion beim Drucken von Daten auf. Nach dieser Konsole fügen wir Callback und Gaul hinzu. Diese Funktion hier kauft jetzt die Schülerdaten in diesem Rückruf. Und lassen Sie uns diese Rückkehr entfernen. Wir brauchen es nicht mehr. Jetzt geben wir nichts von dieser GetString-Funktion zurück. Wir müssen diesen Funktionswert also nicht mehr in einer Variablen speichern . Für unser zweites Argument müssen wir nun die Funktion, die ich hier verwende, bei einer Funktion übergeben und diese Konsole in dieser Funktion verschieben. Lassen Sie uns nun die Schülerdetails als Schülerparameter abrufen. Sie denken vielleicht, das ist verwirrend, aber glauben Sie mir, das ist es nicht. Lassen Sie mich Sie von Anfang an erklären. Hier. Wir rufen diese Skizze auf, um die Funktion auszuführen, und wir übergeben diese als IID. Also nach zwei Sekunden, beget Konsole diese Zeile. Und danach wird diese Callback-Funktion ausgeführt , der wir ein zweites Argument übergeben. Also erhalten wir diese Objektdaten in diesen beiden Zufallsvariablen. Und dann können wir diese Schülerdaten einfach lösen. Also speichern Sie das und aktualisieren Sie es im Browser. Siehst du, wir bekommen die erste Zeile, die letzte Zeile. Und dann, nach zwei Sekunden, bekommen wir diese Zeile. Mit dieser Technik. Wir erhalten keine undefinierten Daten wie zuvor. Diese Callback-Funktion wird nach zwei Sekunden ausgeführt. Der lustige Teil ist, dass du bereits vor diesem Tutorial Callbacks in deinem Code verwendest . Achten Sie also auf die Syntax der setTimeout-Funktion. Das beste Argument ist function und das zweite Argument ist time. Wir wissen also, dass wir, wenn wir function als Parameter in einer anderen Funktion übergeben , diese Funktion als Callback aufrufen. Stellen Sie sich vor, wir möchten weitere Daten vom Studenten erhalten, sagen wir Fachinformationen des Schülers. Also erstelle ich hier eine weitere Funktion namens gets objects and bias, id, die Studenten-ID. In dieser Funktion gehen wir nun davon aus, dass die aggregierenden Daten wieder aus der Datenbank stammen. Also füge ich hier setTimeout und Baz function als erstes Argument hinzu. Und zwei Sekunden. Jetzt hier tröste ich zuerst das Thema Student und gebe hier diese ID weiter. Und ich habe keine Fächer wie Mathematik, Naturwissenschaften, Computer usw. Nun rufen wir diese Funktion hier auf und übergeben die ID, die Student Dot ID ist. Aber wie wir wissen, erhalten wir nicht sofort Daten. Also verwenden wir Callback. Also hier fügen wir Callback hinzu. Und bevor wir geschrieben werden, rufen wir diese Callback-Funktion auf und übergeben dieses Array in diesem Callback. Und remote ist geschrieben. Definieren wir nun den Callback hier und holen uns diese Themen, die sich in der Variablen subject befinden. Danach können wir die Themen trösten, speichern und die Seite aktualisieren. Siehst du, was sollen wir holen? Post-Zeile, letzte Zeile. Dann, nach zwei Sekunden, erhalten wir Schülerdaten, und nach weiteren zwei Sekunden erhalten wir die Daten der Probanden. 4. Callback lösen: Jetzt gibt es einige Probleme mit Rückrufen. Lass mich dir erklären. Hier. Nehmen wir an, wir wollen Noten für diese Themen bekommen. Also erstelle ich schnell eine Funktion namens getMax und übergebe object als Parameter und Callback. Jetzt kopiere ich einfach diese setTimeout-Funktion und füge sie hier ein. Lassen Sie uns die Konsolennachricht ändern, wodurch Markierungen entfernt werden. Und Bias hier Subjekt und Bias max in diesem Callback, sagen wir 80. Jetzt rufen wir GetMax auf und wir übergeben hier subject at 0 index und definieren dann unseren Callback für den Druck neu. Das markiert. Schreiben Sie also console.log mark. Sie sehen, dass es eine verschachtelte Struktur gibt, da wir mehrere Rückrufe in einem Callback aufrufen. Und das wird es schwierig machen, unseren Code zu pflegen und zu verstehen. Dieses Problem ist als Callback **** bekannt. Dies ist nicht der Fall, wir haben einen asynchronen Score. Wenn also alle Funktionen synchron sind, sieht unser Code so aus. Sie können sehen, dass dieser synchrone Code einfach zu verstehen und zu warten ist. Um dieses Callback****-Problem zu lösen, werden wir eine anonyme Funktion erstellen, um die Funktion zu benennen. Mit anderen Worten, wie wir hier deklariert haben, Callback-Funktion, die eine anonyme Funktion ist, weil sie keinen Namen hat und sie separat als die Funktion benannt definiert. Also definieren wir hier eine Funktion namens display max und wir bekommen Mark als Parameter. Einfach diese Markierungsanzeige malloc-Funktion trösten ist dieselbe wie dieser Callback. Ersetzen wir es also durch unsere Funktion. Jetzt definieren wir hier eine Funktion namens Display Subjekte. Und wir holen uns hier Themen als Parameter und kopieren diese beiden Zeilen von hier und fügen sie in unsere Funktion zum Anzeigen von Themen ein. Diese Funktion ist also dieselbe wie dieser Callback. Wir können es durch Display-Motive ersetzen. Jetzt gilt dasselbe für diesen Callback. Wir erstellen eine neue Funktion namens Student anzeigen und erhalten Schülerdaten als Parameter. Und dann kopieren wir das einfach und fügen es hier ein. Jetzt können wir diesen Rückruf durch diesen vertriebenen Studenten ersetzen . Beachten Sie, dass wir diese Funktion nicht aufrufen. Wir übergeben hier nur die Referenz und sehen, dass wir diese verschachtelte Struktur nicht haben. Also kopiere ich diesen Code in eine neue Datei namens callbacks ab.js. Sie können sich also in Zukunft auf dieses Ergebnis beziehen. Dieser Ansatz ist nicht ideal, aber besser als Callback ****. Das ist also eine bessere Möglichkeit, mit asynchronem Code umzugehen , indem Sie Promises verwenden. 5. Versprechen implementieren: Was ist Versprechen? Ein Versprechen ist ein Objekt , das das Ergebnis einer asynchronen Operation enthalten kann . Mit anderen Worten, Ramis wird Ihnen versprochen, Ihnen das Ergebnis der asynchronen Operation oder einen Fehler zu geben. Lassen Sie mich Sie anhand eines Beispiels erklären. Hier. Ich erstelle eine neue Datei namens Promises ab.js und verknüpfe diese mit unserer Datei index.html. Um ein Versprechen zu erstellen, schreiben Sie das neue Schlüsselwort neu und versprechen Sie es dann. Jetzt nimmt diese Promise-Funktion ein Argument entgegen, das eine Funktion mit zwei Parametern ist. Hier. Der erste Parameter wird aufgelöst und der zweite Parameter wird zurückgewiesen. Und Pfeilfunktion. Darin schreiben wir unseren asynchronen Score. Hier. Auch hier gehen wir davon aus , dass wir Daten aus der Datenbank erhalten. Also schreiben wir hier setTimeout und bars-Funktion und zwei Sekunden. Stellen Sie sich vor, wir holen unsere Daten aus der Datenbank. Also erstelle ich eine Variable namens student ist gleich Objekt, sagen wir id2, einen Namen für Bob. Jetzt schreiben wir hier aufgelöst, weil wir erfolgreich Daten erhalten und wir hier die studentische Variable übergeben. Jetzt machen wir dieses Versprechen in einer Variablen namens promise. Und lasst uns dieses Versprechen konsumieren. Ich verspreche es, welches ist der variable Punkt. Hier. Wir haben dann zwei Hauptmethoden und bekommen. Wenn wir also ein Versprechen erstellen, befindet es sich im ausstehenden Zustand. Und wenn wir die asynchronen Aufgaben erledigen, dann sind die Brahmanen im erfüllten Zustand. Und wenn das ein Fehler ist, sich Brom im abgelehnten Zustand. Hier hat sich unser Versprechen erfüllt weil wir hier als gelöst anrufen. Wenn also das Versprechen erfüllt ist, erhalten wir unsere Daten in dieser Bandmethode. Jetzt speichern wir unsere Daten im Ergebnisparameter und trösten dieses Ergebnis dann einfach. Speichern Sie dies und sehen Sie nach zwei Sekunden, dass wir dieses Ergebnis erhalten. Stellen Sie sich vor, wir erhalten aus irgendeinem Grund keine Daten aus der Datenbank. Also kommentiere ich diese Zeilen aus und rufe hier die Reject-Funktion auf. Zur besseren Vorgehensweise: Jedes Mal, wenn wir einen neuen Fehler erstellen und verzerren, unsere Fehlermeldung hier. Speichern Sie die Änderungen und drücken Sie die Seite erneut. Siehst du, wir bekommen diesen Fehler hier. Lassen Sie uns nun sehen, wie Sie diesen Fehler konsumieren können. Nach diesen 10 Metern fügen wir eine weitere Methode namens catch hinzu. Und wir bekommen adder und console.log diesen Fehler, diese NC, wir bekommen diesen Fehler hier. Das ist also die Implementierung von promise in JavaScript. Lassen Sie mich Ihnen nun zeigen, wie wir unseren vorherigen Code in Versprechen umwandeln können . Also ich habe diesen Code, welches Callback****-Problem auch immer. Beginnen wir also mit dieser Funktion „Schüler holen“. In dieser Funktion geben wir eine neue Promise UND-Funktion mit Variablen zum Auflösen und Zurückweisen innerhalb dieser Fehlerfunktion zurück. Entferne diesen Code. Jetzt entfernen wir diesen Callback. Wir brauchen es nicht und fügen den Ort dieses Rückrufs hinzu. Wir fügen gelöst hinzu. Testen wir jetzt dieses Versprechen. Hier. Wir nennen diese Sketch-Run-Funktion und übergeben id1. Jetzt wird diese geschwollene Funktion wird das Versprechen zurückgeben. Wir speichern dieses Versprechen in einer Variablen namens promise, als wir dieses Versprechen konsumieren , und fügen hier als Methode hinzu. Jetzt bekommen wir diese Daten im studentischen Parameter und einfach console.log den Schüler. Jetzt kommentieren wir diesen Code aus. Und ich verknüpfe diese Skriptdatei mit der HTML-Datei. Speichern Sie dies und aktualisieren Sie die Seite. Siehst du, nach zwei Sekunden bekommen wir Daten. 6. Übung und Lösung: Wenn du mir folgst, habe ich eine Aufgabe für dich. Ich möchte, dass du diese beiden Funktionen in Versprechen umwandelst. Also pausiere dieses Video hier und probiere es selbst aus. Und danach schauen Sie sich die Lösung an. In dieser Funktion. Wir kommen zurück und schreiben einfach hier New und wählen dieses neue Versprechen aus. Sehen Sie, wir erhalten diese Vorlage, indem Sie diese kleinen Tricks verwenden, Sie Ihre Produktivität steigern können. Verschieben Sie nun diesen Code in diese Funktion und entfernen Sie diesen Callback und ersetzen Sie ihn durch das Ergebnis. Jetzt erstellen wir auch ein neues Versprechen und verschieben diesen Code in diese Pfeilfunktion. Entferne nun diesen Callback und ersetze ihn durch das Ergebnis. Wir setzen unsere alte Funktion in Versprechen um. Lassen Sie uns nun sehen, wie Sie diese verschachtelten Versprechen konsumieren können. Also entfernen wir diese Konsole von hier und rufen unsere nächste Funktion auf. Wir bekommen nur Fächer und bestehen die Studentenpunkt-ID des Jahres. Jetzt wissen wir, dass diese Funktion wieder Versprechen zurückgibt. Also müssen wir die Methode dann verwenden. Außerhalb dieses 10-Meters fügen wir einen weiteren hinzu, als in Probanden gespeichert. Danach rufen wir die getMax-Funktion auf und übergeben hier unser erstes Thema. Jetzt bekommen wir noch ein Versprechen. Also fügen wir eine weitere als Materie hinzu und speichern diese Markierung. Und einfach console dot log diese Markierung, speichern Sie diese und aktualisieren Sie die Seite. Sehen Sie, dass es genauso läuft wie zuvor. Jetzt können wir sehen, wenn wir Callbacks verwenden, unser Code sieht wie diese verschachtelte Struktur aus. Und nachdem wir Versprechen angewendet haben, sieht das gleiche Ziel einfach und konform aus. Zur guten Praxis fügen wir immer Cash-Methode, Header und console.log Fehler hinzu. Wenn wir also in einem dieser Versprechen einen Fehler erhalten , wird die Single-Catch-Funktion ausgeführt. So einfach ist das. Jetzt können wir diese Versprechen sogar vereinfachen , indem wir async await verwenden. 7. Async Warten – [Beste Möglichkeit, Versprechen zu bewältigen]: Async Await hilft uns also, asynchronen Code wie synchronen Kern zu schreiben . Es ist wie eine Zauberei. Lass es mich dir hier zeigen. Ich nenne diese Funktion get student mit id1. Wenn wir nun eine Funktion aufrufen, die ein Versprechen zurückgibt, können wir auf dieses Ergebnis warten und dieses Ergebnis dann in einer Variablen speichern , wie wir es in synchronem Code getan haben. Speichern wir das also in einer Variablen namens student. In ähnlicher Weise rufen wir nun die nächste Funktion auf, nämlich Fächer und Bhatia-Student-Punkt-ID abrufen. Warten wir nun darauf und speichern es in einer Variablen namens Subjekte. Danach rufen wir unsere letzte Funktion auf, die GetMax und das Bias-Faszienobjekt aus dem Studenten-Array ist. Lassen Sie uns nun auch ein Gewicht dafür und speichern Sie dies in Mark Variable. Und dann haben wir diese Markierung console.log. Jetzt können Sie sehen, dass wir mit diesem asynchronen Code und unserem Interpreter asynchronen Code schreiben können, wie synchroner Kern aussieht. Dies ist im Vergleich zu Rückrufen und Versprechungen leicht zu verstehen und aufrechtzuerhalten . Wir müssen diese zehn Meter nicht immer wieder schreiben. Jetzt könnten Sie Aggressionen haben. Das ist asynchron. Wann immer wir den wait-Operator verwenden, müssen wir das in Funktion mit dem asynchronen Operator verschieben. Lass es mich dir zeigen. Also füge ich hier einfach eine Funktion hinzu, die Anzeigedaten genannt wird , und verschiebe diesen Code hinein. Jetzt zu Beginn dieser Funktion füge ich async hinzu. Das war's. Denken Sie daran, dass Sie ohne diese Aktion keine Acht in Ihrem Code verwenden können. Es wird Ihnen Fehler geben und bearbeiten, und wir rufen diese Anzeigedatenfunktion auf. Jetzt kommentiere ich diesen Versprechen-Teil aus. Speichern Sie dies und aktualisieren Sie die Seite. Siehst du, wir bekommen die gleiche Wüste mit async await. Unser Code sieht aus wie synchron, aber unter der Haube konvertiert die JavaScript-Engine Zwietracht in so etwas, cool oder kalt, funktioniert wie asynchroner Kern und sieht aus wie synchroner Code. So einfach ist das. In Promises haben wir nun Fehler mit dieser get-Methode behandelt. Aber wie können wir diesen Fehler in diesem asynchronen und abwartenden Ansatz für die Fehlerbehandlung behandeln? Wir benutzen try and catch Block. Also schreibe ich hier trocken. Und innerhalb dieses Versuchsblocks verschieben wir unseren alten Code. Und danach fügen wir einen Catch-Block hinzu. Und dieser Catch-Block erhält ein Error-Objekt. Und wir müssen diesen Fehler einfach protokollieren. In einfachen Worten, wenn in diesem Versuchsblock ein Fehler aufgetreten ist, wird der Blog dieses Typen ausgeführt. Also kommentiere ich diese Markierungsvariable aus, Teilverkostung, speichere sie und aktualisiere die Seite. Und sehen Sie, wir bekommen diesen Fehler. Mark ist nicht definiert. Wenn wir also async await als bewährte Methode verwenden, brechen wir immer unseren Code auf und versuchen, Block zu fangen. 8. Alle Konzepte neu erstellen: Lassen Sie uns zusammenfassen, was wir gelernt haben. Callback-Funktion ist also die beste Methode, um mit asynchronem Score umzugehen. Aber in der Callback-Funktion rupees Das Problem rief Callback ****. Danach sehen wir Versprechen, die einfach versprochen haben, Ihnen das Ergebnis eines asynchronen Betriebs zu geben oder Ihnen einen Fehler zu geben. Um ein Versprechen zu erstellen, verwenden wir new promise und darin übergeben wir die Funktion mit zwei Methoden. Ergebnis, Verwerfen, das einzige Mittel erfüllt und Zurückweisen bedeutet abgelehnt. Aber mit Versprechungen bekommen wir auch diese verschachtelten und Methoden. Danach sehen wir asynchrone Warteoperatoren. Diese asynchrone Erwartung funktioniert wie asynchroner Code und sieht aus wie synchroner Kern. Wenn wir also die Funktion aufrufen, fügen wir am Anfang einen Gewichtungsoperator hinzu. Dies wird uns helfen, Code synchron zu schreiben. Und am wichtigsten ist, dass Sie diesen Code mit einem einzigen Operator in eine Funktion einfügen müssen. Ohne async funktioniert await nicht. Und deshalb ist es als async await bekannt. Und das Letzte, die Fehlerbehandlung. Wir verwenden einen Prüfblock, schnappen nach Fehlern und trocknen für den gesamten Code. Also platzieren wir unseren alten Code in try block und behandeln den Fehler im catch-Block. Herzlichen Glückwunsch, Sie haben diesen Kurs abgeschlossen und ich hoffe, Sie verstehen diese Themen. Wenn dir dieser Kurs gefallen hat, kannst du deine Bewertungen teilen. Es wird mir helfen, mehr Schüler wie Sie zu erreichen. Wir sehen uns also in der nächsten Klasse. Auf Wiedersehen.