*NEU* AJAX – Abschluss der Grundlagenkurse – Teil 9: Event und Async/Warten

2. Was ist der Event Loop: Bist du bereit? Ich hoffe es. Dies ist eine tolle Rubrik und Awesome Glass und tolle Vorträge über asynchron sprechen und warten. Und das fügt der bereits modernen IT's API wirklich eine moderne Flucht hinzu. Und ich hasse dieses Wort, aber um asynchron zu verstehen und zu warten, braucht man ein hohes Verständnis darüber, was die Ereignisschleife ist. Ich möchte nicht zu sehr detailliert auf die Ereignisschleife eingehen , von der Sie wissen müssen, dass sie existiert. Und es wird nur dazu beitragen, asynchrone Anfragen zu festigen. Oder lasst mich gleich mit den Grundlagen beginnen. Wir wissen, dass der Browser, auch bekannt als Chrome und JavaScript, zum Beispiel Node.js , Single Thread ist. Und weil wir es mit Ajax zu tun haben, mache ich mir gerade mehr Sorgen um den Browser und bekomme das, alles in einem Browser läuft von einem Hauptthread. Alle Browser haben ein Ding, das als Hauptthread bezeichnet wird. Und in diesem Hauptthread passieren viele Dinge. Hier parteien die es für den Browser. Hier wird Ihr JavaScript-Code ausgeführt. Es ist der Ort, an dem das Rendern stattfindet, und so wird das DOM, das Document Object Model, Schleifen. Was heißt das? Das bedeutet, dass , wenn etwas im Hauptthread lange dauert alles andere blockiert wird, wenn etwas im Hauptthread lange dauert. Ich möchte, dass du dieses Bild visualisierst. Sie sind ein Hauptfaden. In diesem Hauptthread passiert alles wie ich bereits erwähnt habe, hier sind die Parteien noch. Es ist nicht nur JavaScript, das im Hauptthread ausgeführt wird, sondern auch die Aktualisierung des DOM wenn ein Browser CSAs aktualisiert. Das passiert alles in diesem Hauptthread. Um zu vermeiden, dass bestimmte Aufgaben alles andere blockieren, der Browser eine sehr gute Idee gefunden, mehrere Threads vom Hauptthread weg zu spawnen . Aber sobald diese Stämme etwas getan haben, um das sich eine Seite kümmern muss, müssen sie natürlich zum Hauptthread zurückkehren, um dem Browser diese Informationen und das Gewicht zu geben , wenn der Event-Röhrenfuß in . Weißt du es? Nun, es ist die Ereignisschleife, die diesen gesamten Prozess verarbeitet und verwaltet. Komm schon, das ist ziemlich cool, oder? Das ist die gerade Röhre. Und um den Punkt nach Hause zu bringen, warum schauen wir uns den Code nicht speziell an. Ich möchte mir die setTimeout-Funktion ansehen. Wir haben es schon ein paar Mal in diesem Kurs gesehen. Aber lass es mich aufschlüsseln. So schreibt man es aus. Es braucht zwei Argumente, den Callback und Millisekunden. Aber was bedeutet die Sake-Timeout-Funktion ? Was macht es? Was macht es? Zwei Dinge. Das erste ist, dass es x Millisekunden wartet, wann immer wir definieren. Und sobald es fertig ist, wird die Callback-Funktion ausgeführt , bis diese Millisekunden bestanden sind. Aber lassen Sie uns dies jetzt nicht als asynchrone Funktion behandeln. Lassen Sie uns nun darauf hinweisen, dass die setTimeout-Funktion synchron ausgeführt wird. Wenn wir es wie eine asynchrone Funktion ausführen würden, genau wie wir, würde es im Hauptthread laufen und das bedeutet, dass es alles andere zieht, bis es fertig ist. Wir wollen nicht, dass das passiert, oder? Das ist sehr schlecht für die Benutzererfahrung. Wie lösen wir das? Nun, das ist richtig Um diese Status-Timeout-Funktion zu vermeiden diese Status-Timeout-Funktion wird nicht im Hauptthread ausgeführt. Denken Sie an diese Nebengeschäfte. Ein ausgefallener Entwicklungsbegriff dafür ist , dass er parallel ausgeführt wird. Und das ist nur ein schickes Sprechen für den Hauptthread in einem dieser Seiten-Threads , dass, wenn Sie wirklich aufhören darüber nachzudenken, dies ein anderes Problem darstellen wird, denn wenn es an der Zeit ist, auszuführen diese Callback-Funktion , denken Sie daran, nachdem die Millisekunden vergangen sind, was passiert dann? Nun, diese Callback-Funktion muss ausgeführt werden und die Ausführung findet statt. Das ist direkt im Hauptthread. Können Sie sehen , dass das Problem damit automatisch direkt in den Hauptthread geht direkt in den Hauptthread , wenn diese Funktion bereit ist. Das Problem ist, dass Sie möglicherweise viel JavaScript-Code parallel ausführen können. Dies bedeutet, dass Sie möglicherweise dasselbe DOM gleichzeitig bearbeiten können, wobei der NG-Tag vollständig auf die Entwickler als Race-Condition-Probleme bezeichnet werden. Das bedeutet effektiv, dass Sie nicht möchten eine JavaScript-Funktion das DOM halb manipuliert. Und dann wird diese Callback-Funktion plötzlich in den Hauptthread geworfen und beginnt Ausführung eines anderen Teils des DOM oder noch schlimmer, wobei die erste JavaScript-Ausführungsfunktion überschrieben wird. Wie lösen wir dieses Problem? Nun, der Browser ist wiederum sehr clever sicherzustellen, dass Sie keine Probleme beim gleichzeitigen Ausführen Probleme beim gleichzeitigen Ausführen mehrerer JavaScript-Codes haben, Task-Hinweise wurden eingeführt. Ich weiß, was Sie denken, Sie denken, dass die Kundenentwicklung schwer genug ist. Wenn wir jetzt über Ereignisschleifen sprechen, haben wir Begriffe wie Parallele der Haupt-Thread-Seite Task-Warteschlangen, hören aber einfach nicht auf. Keine Sorge, mach dir keine Sorgen. Ich weiß, dass ich dort war, aber es macht wirklich intuitiv Sinn. Wenn Sie nur einen Schritt zurücktreten, haben Sie diesen Hauptthread. Kann alles gleichzeitig auf den Hauptfaden werfen , wenn sie fallen. Funktionen, Aufgaben müssen in die Warteschlange gestellt werden. Das ergibt also wirklich Sinn. Denken Sie daran, dass ein wichtiger Teil der Funktionsweise der Ereignisschleife das Konzept der Aufgabenwarteschlangen ist. Und wie haben diese Aufgabenwarteschlangen funktioniert? Nun, was der Browser macht, ist, dass er der Ofenröhre mitteilt , dass er einige Funktionen hat , um etwas im Hauptthread zu tun . Und Ihr Browser fügt diese Funktion zur Aufgabenwarteschlange hinzu, wenn diese Funktion zur Ausführung bereit ist. Grundsätzlich, wenn die Funktion bereit ist, wird sie zu dieser Aufgabe hinzugefügt. Du, es wartet. Und nur wenn es eine Lücke im Vorteil gibt, müssen die Leute wieder in den Hauptthread gebracht werden. Dies stellt sicher, dass die Dinge in geordneter Weise ausgeführt werden. Es ist sinnvoll, weil wir irgendwann die Entlüftungsschleife diese Aufgaben ausführen können, wenn sie fertig sind. Sprechen wir dann noch einmal über unsere Sit-Timeout-Funktion da wir wissen, dass die setTimeout-Funktion tatsächlich eine asynchrone Funktion ist. Wie sieht es in Wirklichkeit aus? Nun, wieder würden wir es genauso aufschreiben. Auch hier passieren zwei Dinge, wenn wir diese Funktion ausführen. Aber das ist es, was wirklich passiert. Erstens haben wir ein Gewicht von x Millisekunden, aber das wird parallel ausgeführt. Weißt du was das heißt? Wird nicht im Hauptthread ausgeführt. Was ist das zweite, was der Browser hier macht? Es wird die Aufgabe in die Warteschlange stellen, wenn der Rückruf fertig ist. Sobald wir eine bestimmte Anzahl von Millisekunden gewartet haben, dieser Callback ausgeführt werden. Der Browser bearbeitet die Aufgabe. Natürlich ruft die Ereignisschleife die Callback-Funktion auf, wenn sie fertig ist. Wenn die Ereignisschleife fertig ist. Ich werde dich nur ein bisschen mehr umhauen. Das ist sehr weit fortgeschritten oder hätte vielleicht hier aufhören können. Aber Sie müssen wissen, dass es sich um verschiedene Aufgabenkategorien handelt. Wir haben Mikroaufgaben und Mikroaufgaben. Ich denke, eine gute Art darüber nachzudenken ist, dass Sie wichtige Aufgaben und nicht so wichtige Aufgaben haben . Was bedeutet die Makroaufgabe? Wir erledigen Aufgaben in der Makroaufgabenwarteschlange, wie die Sit-Timeout-Funktion. Dann müssen Sie auf die nächste Runde der Ereignisschleife warten , bevor Sie ausgeführt werden. Eine andere Möglichkeit, dies zu sagen, besteht darin, dass die Aufgaben und das Makro Q jeweils ein Element verarbeitet haben. Aufgaben in der Micro-Task-Warteschlange werden jedoch in der aktuellen Runde des Ereignisses ausgeführt. Eine weitere Nuance ist, dass die Mikrowarteschlange den gesamten Prozess bis zum Abschluss betreibt, einschließlich aller Elemente, Funktionen und des zusätzlichen Codes, den Sie in Echtzeit zur Warteschlange hinzufügen. Und aufgrund der hohen Bedeutung für Mikroaufgaben bedeutet dies, dass die Ereignisschleife das Rendern blockieren wird , während sie Mikroaufgaben ausführt. Kunde, okay, Kunde, ich verstehe es, ich verstehe es, aber wo passt Ajax in all das? Nun, wir wissen, dass Ajax mit Versprechen umgeht. Versprechen von sehr, sehr wichtig, wenn es um Browser geht. Dies bedeutet, wenn der Code schließlich in den auszuführenden Hauptthread bearbeitet wird. Lass mich das sagen. Wenn der Browser diese Callback-Funktionen zur Aufgabenwarteschlange hinzufügt , behandelt er diese Funktionen als Mikroaufgaben. Ich weiß, ich weiß. Wahrscheinlich umwerfend. Keine Sorge. Sie müssen nicht unbedingt über all das Bescheid wissen , um Ajax zu verstehen. Aber es sind sehr, sehr interessante und fortgeschrittene Konzepte. Es macht Spaß. Und ich möchte, dass du ein Großmeister wirst. In den nächsten Vorträgen möchte ich, dass wir jetzt zur Konsole springen und ich möchte anschauen , wie die Ader to Loop funktioniert. Ich wollte etwas Code mit dir schreiben und über meine Vorstellungen darüber sprechen, was im Hintergrund passiert wird den Punkt wirklich nach Hause treiben. Und dann werden wir natürlich in was asynchron und ein Gewicht wirklich springen . Ich kann es kaum erwarten. 3. Macro vs. Tasks: Willkommen, willkommen, willkommen. Ich bin super aufgeregt. Ich hoffe du tanzt. Ich hoffe, du hast viel Spaß. Ich hoffe, du lernst eine Zeit. Und vielen Dank , dass du bei mir bleibst. Wir haben wirklich einen langen Weg zurückgelegt. Und natürlich beschäftigen wir uns jetzt mit Themen der Videofarmen. Wir haben die Ereignisschleife diskutiert, aber was ist besser, als es Ihnen zu zeigen? Ich weiß nichts, weshalb ich dir die Event-Schleife in Aktion zeige . Das wird ziemlich interessant sein. Genau genommen muss ich dir das nicht zeigen, aber ich möchte, dass du eine Großmeister-Kodierung wirst. Ich möchte nicht nur, dass du die Grundlagen von Ajax verstehst. Ich möchte, dass du verstehst, was hinter den Kulissen passiert. Natürlich werden wir asynchron diskutieren und warten. Aber um asynchron zu verstehen, möchte ich nur ein bisschen mehr Wissen über die Ereignisschleife pausieren . Denken Sie daran, dass eines der wichtigen Dinge bei der Ereignisschleife das Konzept der Aufgabenwarteschlangen ist. Funktionen, Methoden, Aufgaben oder Bearbeiten in einer Aufgabenwarteschlange. Und natürlich bekommt man verschiedene Arten von Aufgaben. Wir bekommen Makroaufgaben und wir bekommen Mikroaufgaben. Aber Clyde, das wissen wir schon. Ich weiß, dass du es tust. Warum spielen wir nicht einfach in einem Texteditor herum? Warum hatten wir ein bisschen Spaß? Los geht's. Ich habe einen leeren Visual Studio-Code-Editor geöffnet. Ich habe eine Datei namens test.js. Das war's. Jetzt könnte ich einfach das Terminal öffnen, wir könnten einfach alles auf dem Bildschirm protokollieren. Wir könnten unser JavaScript im Browser ausführen. Es gibt viele Möglichkeiten, etwas beim Programmieren zu tun. Ich zeige dir noch einen anderen. Jetzt möchte ich den Debug-Modus in Visual Studio-Code implementieren . Also klicke ich einfach auf diesen Tab. Und ich klicke darauf, erstelle eine Startpunkt-JSON-Datei. Und lasst uns Node.js verwenden, um zu probieren. Natürlich erstellt Visual Studio-Code diese Startstop-JSON-Datei automatisch. Ich möchte nicht, dass du dich darüber stresst. Du musst nicht wissen, wie das alles funktioniert. Oder ich möchte zu dieser Debug-Konsole kommen , die sehr, sehr nützlich ist. Was möchte ich machen? Nun, lasst uns einfach etwas auf dem Bildschirm protokollieren , um damit zu beginnen. Und ich weiß nicht, lass uns einfach die Log Console eins konsolen. Wie ist das? Aber was ist nett mit uns? Debug-Umgebung, da Sie Haltepunkte in Ihren Code einfügen können , können Sie in Ihren Code eintreten. Sehr nützlich. Aber wie auch immer, hier werde ich diesen Code einfach ausführen. Und in unserer Debug-Konsole sehen wir die Ergebnisse. Es ist Konsole eins. Das ist übrigens ein bewässertes, mein Lieblings-Push-Tier. Da sind wir los. Was möchte ich dir zeigen? Nun, lass mich dir diese Frage stellen. Anstatt die Konsole zu kühlen, weiß ich nicht, cool es einfach. Ich wusste es nicht synchron , weil wir wissen, dass das Funktionskonsolenprotokoll asynchron läuft. Wenn wir zwei wie diese haben, oder? Was denkst du wird passieren? Was glauben Sie, dass das Ergebnis in unserer Debug-Konsole sein wird? Lassen Sie uns schreiben, wir wissen, dass JavaScript und Node Fit Meter Single-Threaded sind. Wir wissen, dass die erste Zeile synchron ausgeführt wird. Eine im Paket geht zur nächsten Zeile und das Netz wird ausgeführt. Alles klar, also lass es uns laufen lassen. Wir haben genau das bekommen, was wir erwarten würden. Es wird gedacht, dass es ein bisschen flippiger wird. Fügen wir eine Makroaufgabe hinzu. Bleibe Makroaufgabe. Zum Beispiel die setTimeout-Methode, Makroaufgaben, die wir kennen oder bearbeiten, werfen, stellen das gemischte Braun des Vinculins in die Warteschlange und führen sie aus. Das ist es, was eine Makroaufgabe ist. Und wir kennen setTimeout-Methode, die asynchron ist. Es ist eine Makroaufgabe. Ich benutze nur Kurzbefehle. Es ist also sehr einfach zu lesen. Und alles was ich will ist, dass ich Log konsolen möchte. Ich weiß nicht, sagen wir mal Timeouts. Und wir können ein Bild von einer Giraffe machen. Und wir wissen, dass das zweite Argument die sechste Timeout-Funktion darin besteht, wie viele Millisekunden wir warten wollen. Nun, in diesem Fall sagen wir Sarah Millisekunden. Sehr einfaches Beispiel. Jetzt möchte ich, dass du überlegst, was das Ergebnis in unserer Konsole sein wird. Was passiert, wenn wir diesen Code ausführen? Lass es uns laufen lassen. Es ist so ziemlich genau das, was du sicher erwartet hast. Die erste Konsole läuft im Hauptthread. Jetzt kommen wir zur Sit-Timeout-Methode , die der Makro-Task cute hinzugefügt wird, auch bekannt als sie vom Hauptthread ausgeführt wird. Natürlich, was das bedeutet, obwohl wir die Ergebnisse dieses Timeouts sofort konsolenprotokollieren möchten , ist es immer noch außerhalb des Haupt-Threads. Und während es sich vorübergehend außerhalb des Hauptthread befindet, erhalten wir dieses Konsolenprotokoll, das erneut im Hauptthread ausgeführt wird, weshalb das Konsolenprotokoll zuerst synchron passiert, Konsolenprotokoll synchron , um Sekunde zu passieren. Und dann schließlich, fast augenblicklich, sagen wir Timeout-Methode, bearbeiten Sie zurück zum Hauptthread und dann wird es ausgeführt. Interessant. Aber warum gehen wir jetzt nicht mit Versprechen um? Denken Sie daran, bei Ajax dreht sich alles um Versprechen. Und wir wissen, dass Versprechen keine Makroaufgabe ist. Ein Versprechen ist ein Watt. Das stimmt. Es ist eine Mikrotask. Und wir wissen, dass sie an die Mikroaufgabe bearbeitet werden und sie werden vorher ausgeführt. Dies ist der Hauptunterschied zwischen Mikroaufgaben und Makroaufgaben, die vor Beginn der nächsten ausgeführt werden. Warum haben wir das Promise-Objekt nicht verwendet und wir führen seine Resolution Methode aus? Natürlich hätten Sie im wirklichen Leben eine ganze Menge Code und führen dann die Lösungsmethode aus. Dann führen wir natürlich unseren Rückruf innerhalb eines Dekans durch. Wir brauchen keine Argumente, also können wir einfach etwas wieder auf den Bildschirm protokollieren. Warum schnappen wir uns in diesem Fall nicht einfach unsere Giraffe? Anstatt ein Timeout zu rufen, können wir es als Versprechen bezeichnen. Was denkst du wird jetzt passieren? Das wird etwas schwieriger. Du musst darüber nachdenken. Welche Reihenfolge würden Sie erwarten, wenn Sie Dinge sehen würden? Ich würde erwarten, synchron zu sehen, diese console.log das erste in Zeile eins. Das würde augenblicklich geschehen. Interessant ist , dass das SetTimeout, das wir kennen, auf den Makrowurf F bearbeitet wird. Das Pulsieren wird dem Versprechen entsprechen. Und wenn es dieses Versprechen trifft, wird ein Versprechen selbst im Hauptfaden stehen. Aber wenn die Impulse die schlanke Methode sehen , die vom Hauptthread ausgeführt wird. In der Tat wird es der Microtask niedlich hinzugefügt. Das Mögliche traf dann die verlorene console.log. Die synchrone zu Zeile würde angezeigt werden, weil das sofort ausgeführt wird. Also würde ich erwarten, dass synchron zuerst synchron zeigt, denn die Versprechenserklärung steht auf dem Mikrowurf Q heraus, um zu erwarten, dass Schulden zuerst an uns zurückgegeben werden , das Giraffenversprechen, dann endlich das Giraffen-Timeout. Mal sehen, ob ich Recht habe. Lasst uns den Run Button drücken und sehen, was passiert. Genau das, was wir erwarten würden. Super, super interessant. Kannst du sehen, wie viel Spaß das macht? Kannst du sehen, wie intuitiv das alles wird? Okay? Das ist nur ein Aufwärmen. Ich möchte, dass wir hier eine Pause machen. In der nächsten Vorlesung möchte ich, dass wir weiter fortgeschritten werden und nicht damit abschneiden. Ich möchte anfangen, unsere eigenen Versprechen zu machen. Ich weiß aufregend. Ich möchte eine While-Schleife verwenden, damit wir sehen können, wie sie Ausführung oder Verletzung anderer Funktionen blockiert. Und es wird super faszinierend sein. Das war nur ein Aufwärmen. Wir sehen uns in der nächsten Vorlesung. 4. Erstellen unseres eigenen Versprechens: Willkommen zurück. Hoffe du hast viel Spaß. Und wie ich bereits erwähnt habe, wird das komplizierter, also lasst uns alles löschen. Oh Mann, ich hasse es, all meine schönen Arbeiten zu löschen. Wie auch immer, lass uns weitermachen. Was ich tun möchte, ist, dass ich Zeitstempel in unserem Code implementieren möchte. Jetzt, nur um dir zu zeigen, wie man etwas Neues macht. Um das zu tun, möchte ich jetzt damit beginnen, die Zeit zu bekommen , bevor wir den Code ausführen. Es ist sehr einfach in JavaScript zu machen. Sie können das Datumsobjekt von JavaScript einfach übersteigen und das nominierte ausführen. Ganz einfach. Als Nächstes wollte ich eine Funktion erstellen, mit der die Konsole etwas auf dem Bildschirm protokolliert. Ich möchte nicht ständig schreiben. Konsolenprotokoll. Implementieren Sie das in einer Funktion. Warum erstellen wir also nicht eine Funktion und nennen sie Mangel an einem besseren Wort Ausgabe , denn das ist was für eine Ausgabe. Es wird einen Streit erfordern. Sagen wir einfach aus Mangel an einem besseren Wort, das kann es sein, was wir hineingehen. Und was wollen wir passieren? Nun, wie ich bereits erwähnt habe, möchte ich eine Konsolenprotokollfunktion implementieren. Einfach. Was möchte ich ein Konsolenprotokoll? Lassen Sie uns dies in Vorlagenliterale einfügen, die das Protokoll konsolen möchten. Erstens, was auch immer wir in die Ausgabefunktion übergeben, ich möchte tatsächlich ein Protokoll konsolen, das sich selbst nimmt. Das nächste, was ich tun möchte, ist, dass ich eine neue Linie implementieren möchte. Dann möchte ich zeigen, wie lange es gedauert hat, diese Funktion auszuführen. Ich will, dass die Zeit verstrichen ist. Mit anderen Worten, das wird was sein? Das Dollarzeichen geschweifte Klammern in Temperaturjoule bedeutet übrigens nur, dass wir auf Variablen verweisen und JavaScript schreiben können . Es ist sehr nützlich. Was wir also tun können, ist, dass wir jetzt die Zeit bekommen können , nachdem der Code ausgeführt wurde, nämlich Datumspunkt. Jetzt verkaufen wir es weiter. Das können wir aus unserer Mundvariablen abziehen , die wir am Anfang definiert haben. Weißt du was, vielleicht ist es besser, das jetzt nicht zu nennen. Vielleicht sollte ich das als Anfang bezeichnen , weil das unsere Anfangszeit ist, nur damit es dich nicht verwirrt. Ich hoffe, das ergibt Sinn. Lassen Sie mich einfach noch etwas herauszoomen , damit Sie alles in einer Zeile sehen können. Wir finden nur den Unterschied zwischen der Zeit jetzt und dem Zeitpunkt, zu dem wir mit der Ausführung der Funktion begonnen haben. Ganz einfach. Lassen Sie mich etwas hineinzoomen. Was ich als Nächstes machen möchte. Nun, ich wollte eine Blockierfunktion definieren. Es wird eine sehr einfache Funktion sein. Nun, ich möchte es tun, dass ich eine Schleife erstellen möchte. Definieren wir also eine Variable, die ich bei 0 beginne. Und dann verwende ich JavaScript-While-Funktion. Dies wird ständig ausgeführt, vorausgesetzt, dass das, was in dieser Klammer vorgesehen ist, wahr ist. Wir werden sagen, dass es ausgeführt wird solange ich weniger als, ich weiß nicht, nur eine sehr große Zahl bin. Und dann ist bei jeder Iteration oder ich möchte die Zeile erhöhen. Du siehst, dass wir nicht viel tun. Oee. Und wenn alles fertig ist, wenn diese While-Schleife beendet ist, geht der Code dann zur nächsten Zeile weiter. Und dann können wir einfach etwas zurückgeben. Was möchte ich zurückgeben? Wir können einfach eine SMS zurückgeben. Wir können sagen, dass wir genug getan haben, um eine nette hübsche Eule zu setzen. Ja. Ich habe übrigens eine Eule in meinem Garten und ich möchte eine Eulenkiste bauen. So aufgeregt. Wie auch immer, ich denke, das sieht ziemlich cool aus. Alles fertig. Da sind wir los. Das ist unser Blockierungscode. Und jetzt haben wir es getan, alles was ich jetzt tun werde, ist diese Funktionen auszuführen und ich möchte Sie fragen, was passieren wird. Also lasst es uns zuerst sehen. Unsere Output-Funktion haben wir oben definiert. Denken Sie daran, dass wir es mit etwas Geschmack pausieren werden. Welche Tipps möchten wir darauf weitergeben? Nun, wir können es auf Eis weitergeben, reden, und dann können wir uns einfach ein asynchron ansehen, was wir vorher gemacht haben, synchron, was will ich als nächstes machen? Nun, ich möchte unsere Ausgabefunktion erneut ausführen, diesmal aber als Argument. Denken Sie daran, dass wir ihm ein Argument x. Ich möchte keinen einfachen Text weitergeben. Nun, eigentlich tue ich das. Aber ich möchte unsere Funktion weitergeben , die letztendlich zurückkehren wird. Ich nehme an, das alles zu sagen. Um dies zu tun, können wir die Funktion übergeben, wir können diese Funktionsblockierung ausführen. Dann hast du es endlich erraten. Ich möchte ein anderes synchrone Konsolenprotokoll machen, aber diesmal natürlich. In Ordnung. Lass mich dir diese Frage stellen. In was wird Ihrer Meinung nach das Ergebnis dieses Codes sein? Was wird uns zuerst angezeigt. Nun, ich würde erwarten, dass der synchrone zuerst zeigt, das stimmt. D nichts. Nun, wir haben diesen blockierenden Code und daran ist nichts asynchron. Während die Schleife in JavaScript sehr einfach ist, läuft sie im Hauptthread. Wenn der Parser also diese wilde Funktion im Hauptthread trifft , bleibt er im Hauptthread. Und alles andere muss warten. Langweilig. Ich weiß, dass das eine schlechte Benutzererfahrung ist. Dann, wenn diese While-Schleife beendet ist, gelangen wir zum endgültigen synchronen Ausgabe-Tool. Mal sehen, ob ich Recht habe, das sind Läufer. Und sieh dir das an. Einmal verstrichen war synchron 0 Millisekunden. So schnell war es. Wir kommen auf diese gemischte While-Schleife, Sie wissen, was 80 Millisekunden auch sind, aber kurzes Wasser und fügen noch ein paar Nullen hinzu. Lass es uns nochmal laufen lassen. Nur um es ein bisschen länger zu machen. Wir werden synchron und dann vergeht es und wir kommen endlich synchron. Zwei sehr interessant, sehr interessant. Ich weiß, ich weiß. Deswegen wollte ich es dir zeigen. Aber jetzt möchte ich dir noch eine Frage stellen. Wie verhindern wir, dass dieser blockierende Code passiert? Wie können wir es stoppen? Wie können wir dies in einen asynchronen Code verwandeln? Was denkst du? Denken Sie daran, was wir tun wollen, ist , dass ich einen separaten Thread erstellen möchte. Ich möchte diesen Hauptthread verlassen , während diese While-Schleife läuft. Und natürlich machen wir uns ein , während die Schleife beendet ist. Ich möchte diese Return-Anweisung zur Microtask hinzufügen. Süß, das will ich. Wie machen wir das? Man könnte denken, ja, wir können ein Versprechen abgeben. Sie könnten Recht haben, je nachdem, wie Sie denken, dass Sie dieses Versprechen einhalten. Lass mich dir zeigen, was nicht funktioniert. Lassen Sie uns das einfach auskommentieren. Jetzt sollten wir es tatsächlich „Entsperren“ nennen. Aus Mangel an einem besseren Wort. Wie konnten wir das machen? Nun, du denkst vielleicht, lass uns einfach ein neues Versprechen zurückgeben. Es ist das Versprechen Objekt von JavaScript auszuführen. Wir wissen, dass es uns Lösungsobjekt und ein Ablehnungsobjekt zurückgibt. Das wissen wir aus früheren Vorträgen. Wir können unseren Rückruf in diesen geschweiften Klammern ausführen. Sie könnten denken, dass wir unsere While-Schleife hier implementieren können. Ich bin gleich 0. Implementieren Sie während. Wie viele Nullen machen wir das? Kopiere es einfach. Während ich weniger bin als was auch immer so große Zahlen. Nun, wir wollen es tun, ist ich um eins zu erhöhen. Wenn es fertig ist. Wir wollen nichts zurückgeben. Was wollen wir tun, ist, dass wir die Ergebnismethode und die Lösungsmethode aufrufen möchten. Natürlich können wir dieses Sprichwort einfach festhalten lassen. Okay. Bist du bei mir? Tut mir leid, falsch. Also haben wir versucht, das tatsächlich zu löschen. Wir haben versucht, den Blockierungscode in das Entsperren umzuwandeln , indem wir ein Versprechen implementiert haben. Weißt du was sie bedeuten? Werde das Kapital wieder los, meine OCD, keine Konstruktorfunktion. Lassen Sie mich also ein Kleinbuchstaben machen. Sie könnten denken, dass wir in unser Versprechen umgesetzt haben. Dieses Versprechen passiert außerhalb des Haupt-Threads, und daher passiert alles so, wie wir erwarten würden , dass es sich entsperren wird. Nun könnte man denken, dass ein synchrone zuerst angezeigt wird. Da der Entblockierungscode vom Hauptthread entfernt ist, sollten wir synchrone zwei sehen. Und dann, wenn es fertig ist, sollten wir das Ergebnis sehen. Alles fertig. Dass das nicht passieren wird, sollte es nicht? Wenn ich richtig denke, starten wir dieses Programm. Mal sehen, was das passiert ist. Da sind wir los. Sie haben also gesehen, dass obwohl wir versuchen, ein Versprechen auszuführen, es immer noch die Ausführung unserer nächsten synchronen Ausgabe blockiert . Deshalb kommen wir nur in 143 Millisekunden zu synchron zwei. So seltsam, Clyde, ich bin so verwirrt, ich dachte, weil wir das in ein Versprechen einschließen, das bedeutet, dass wir diesen gesamten Code aus dem Hauptthread ausführen werden . Es kann sehr verwirrend werden. Aber jetzt gibt es etwas sehr Fortgeschrittenes, das ich mit dir teilen wollte . Bist du bereit dafür? Also wird es dich umhauen. Bleiben Sie einfach nur die eigentliche Schaffung des Versprechens selbst und die Ausführung der While-Schleife, die bei der Schaffung dieses Versprechens geschieht, das immer noch im Hauptthread stattfindet. Hier ist das Ding. Versprechen selbst sind nur Überwachungstools. Sie sind selbst nicht wirklich asynchron. Das Gewicht ist asynchron, passt rein, wenn es um Versprechen geht. Es passt rein. Wenn wir die Aderanweisungen ausführen. Wenn die Engine eine Dane-Aussage sieht, nimmt sie das, was sich jemals in der Theme-Anweisung befindet, von der Hauptaufgabe des Hauptfadens ab. Und nur wenn das Nettoergebnis fertig ist, wird es zur Mikroaufgabe hinzugefügt. Mit anderen Worten, es ist nur die Lösung des Versprechens in einer Aderaussage, die als Mikrotask aus dem Hauptthread geschieht. Sehr, sehr faszinierend. Deshalb wird die erste synchrone Konsolenprotokollzeile sofort ausgeführt. Dass dieses zweite synchrone Protokoll nur der While-Schleife ausgeführt wird, ist von der While-Schleife ausgeführt wird, ist erledigt, weil die Erstellung dieses Versprechens immer noch den Hauptthread blockiert. Es tut mir leid, ich wollte mich nicht weiter wiederholen, aber das ist ein so wichtiges Konzept Sie verstehen und es wird Ihnen helfen. Dann lass mich dich das fragen. Wie haben wir dann kein Wortspiel beabsichtigt. Wie lösen wir dieses Problem dann? Wie stellen wir sicher, dass die While-Schleife außerhalb des Haupt-Threads stattfindet? Nun, natürlich wollen wir die Resolution Methode ausführen und dann alles in die 18-Anweisung setzen. Wir brauchen diese Ablehnungseigenschaft nicht einmal , weil wir sie nie benutzen. In der Tat kann ich das Ganze löschen. Wir können die Resolve-Methode für dieses Versprechen sofort ausführen . Wir wissen, dass darin ausgeführt wird, dass der Motor nach der Aderaussage suchen wird. Und hier kann unser Code lügen. Sie könnten tatsächlich eine TIA setzen. Wir brauchen keine Argumente. Es sollte funktionieren. Ich glaube, wir haben genug Klammern, sie sollten funktionieren. Jetzt befindet sich die While-Schleife innerhalb einer Dane-Anweisung. Wir sollten erwarten, dass dies jetzt außerhalb des Hauptfadens geschehen wird. Es wird jetzt diesen Code namens type area promise resolve ausgeführt , ist kein Konstruktor. Natürlich nicht nur das neue Keyword. Ziemlich praktisch, Fehlermeldungen dort zu haben. Okay, lass uns jetzt gehen. Und los geht's. Das ist peinliche Hand. Mal sehen wir hier, dass wir einen weiteren Referenzfehler bekommen. Resolve ist nicht definiert. Natürlich rufe ich die Resolve-Methode hier auf. Ich möchte das eigentlich nur zurückgeben, weil wir innerhalb der Aderaussage fahren, sie werden in die Stadt kommen. Natürlich brauche ich nicht mal Klammern. Es ist einfach sinnlos. Versuchen wir es noch einmal. Entschuldigung, drittes Mal, Glück, los geht's. Das ist eine Mitteilung, dass wir unsere alte Aussage nicht bekommen. Warum? Das? Wieder interessant, denk einfach daran, was wir hier machen. Wir haben ein Versprechen gegeben und dieses Versprechen gibt etwas zurück. Am Ende des Tages wird es eine Zeichenfolge zurückgeben, die besagt, dass alles erledigt ist . Das Problem, das wir haben, ist dass wir niemals auf diese Rückkehr zugreifen. Erinnern Sie sich, was ein Versprechen erwartet? Es geht davon aus, uns das Ergebnis zu geben. Und dann können wir beenden, was zu Dekanaussagen führt. Also müssen wir tatsächlich aufrufen Ich blockiere Funktion. Und wenn wir diese Tochter haben, haben wir eine Art Funktion ausgeführt. Die Funktion, die wir hier ausführen möchten , ist diese Ausgabefunktion. Wir können diese Ausgabefunktion einfach ausführen. Das sollte funktionieren. Es ist ein schneller und schmutziger Weg, aber es sollte funktionieren. Ausgang. Mal sehen, ob das klappt. Lassen Sie uns jetzt unseren Code ausführen. Wir haben es geschafft, wir haben es falsch gemacht, Glück. Tut mir leid, aber am Ende sind wir dort angekommen. Denk einfach daran, was wir getan haben. Ich versuche Ihnen zu zeigen, dass ein Versprechen, die tatsächliche Erstellung eines Versprechens im Hauptthread erfolgt. Erst wenn wir anfangen, diese Links-Anweisungen zu treffen, auch bekannt als wenn die Resolve-Methode aufgerufen wird. Steigen wir dann aus dem Hauptthread? Und dort passiert die asynchrone Magie. wollte ich nur klarstellen. Deshalb bekommen wir hier zuerst eine synchrone , die uns zuerst gegeben wird, wir bekommen als nächstes synchrone zwei gegebene Vektoren. Dann bekommen wir endlich diese Rückgabeerklärung von allem erledigt. Übrigens denken Sie vielleicht darüber nach, warum habe ich gerade die Funktionsnamenausgaben eingegeben? Muss ich nicht eine Variable x übergeben . Das macht das so ziemlich hinter den Kulissen. Ich hätte es sein können, wenn das Argument willen ist, hätten wir die Daten nehmen können. In diesem Fall wird es nur die Text-Tochter sein , die alles getan hat. Und dann können wir es nach der üblichen Art schreiben , wie wir es früher in diesem Kurs gemacht haben. Und dann führen Sie diese Ausgabefunktion natürlich aus und wir geben diese Daten weiter. Also hätten wir einen Titus schreiben können. Ich habe gerade eine Abkürzung gemacht. Wenn wir dieses Programm erneut ausführen, sollte uns das genau das Gleiche geben, was es tut. Ich weiß, ich weiß, dass das ziemlich fortgeschritten ist, gut gemacht, um bei mir zu bleiben. Und Sie müssen das nicht unbedingt wissen, um mit async arbeiten zu können und warten zu können. In der Tat müssen Sie das nicht einmal wissen, wenn Sie mit Ajax arbeiten. Aber ich möchte, dass du besser bist als das Rennen. Ich hoffe, du hattest viel Spaß und ich hoffe, dass dies nur ******** mehr Licht darüber ist wie der Vancouver funktioniert und wie asynchroner Code funktioniert. In Wirklichkeit sind sie keine zwei Hauptbedrohungen, die nicht so funktionieren, wenn es um JavaScript geht. Aber bei x Lack tut es. Wenn ich die Dinge von der Hauptaufgabe abnehmen könnte , ziehst du sie wieder an. Es ist sehr interessant, dass genug von der Eventschleife jetzt, ich denke, dass Sie genug von einem hochrangigen Wissen darüber haben . In der nächsten Vorlesung möchte ich wirklich anfangen, über asynchron zu sprechen und warten. Wir möchten unsere Fetch-API-Fakultät verbessern. Ich kann es kaum erwarten, dich in der nächsten Vorlesung zu sehen. 5. Einführung in Async / Await: Schließlich beschäftigen wir uns mit dem Thema Async und warten. Was genau ist es? Nun, zuerst können wir asynchron hinzufügen und warten. Dies sind nur Keywords, die uns von JavaScript zur Verfügung gestellt werden, um unsere Aussagen zu reduzieren. Denken Sie daran, wenn wir es mit Fischanrufen zu tun haben, mit dem Umgang mit Versprechungen. Und jedes Mal, wenn sich ein Versprechen löst, wird die erste Aussage in dieser Ding-Anweisung ausgeführt. Sie müssen das Versprechen zurückgeben, werden dann nach der nächsten Dekanerklärung suchen. In Wirklichkeit können Sie, wie wir gesehen haben, mehrere Flügelketten haben. Das kann ziemlich verwirrend werden. Vertrauen Sie mir, besonders wenn Sie einen sehr komplexen Code haben und viele Versprechen gelöst werden. Eine Problemumgehung besteht darin, async zu verwenden und zu warten, damit wir Code synchron schreiben können. Obwohl all diese Versprechen im Hintergrund geschehen. Mach dir keine Sorgen, wenn du nicht weißt was ich meine, ich zeige es dir in Kürze. Der Punkt, den ich ansprechen möchte, ist, dass die Verwendung von Async and Wait sehr gut mit Ajax funktioniert , da Sie async verwenden und warten, wenn Sie mit Versprechen arbeiten. Und natürlich wissen wir, dass Fitch Versprechen einsetzt , bevor wir darüber sprechen. Denken Sie noch an die beiden Schlüsselwörter, asynchron und ein Gewicht. Ich möchte über asynchron sprechen, nicht synchron, nicht über eine Senke. Ich liebe meine Dad Witze. Ich möchte über asynchron sprechen und das Wort async vor Funktion stellen. Es bedeutet eine einfache Sache. Verirren Sie sich nicht bis ins Detail. Bedeutet nur eine Sache. Was bedeutet es, was sagt es uns? Was macht es? Es sagt der Funktion , dass sie uns ein Versprechen geben soll. Was seltsam, aber es gibt nichts Besseres, als dir ein Live-Beispiel zu zeigen. Gehen wir jetzt zum Texteditor. 6. Async gibt ein Versprechen zurück: Wenn Sie den Drill kennen , erstellen Sie eine neue Datei. Nennen wir es einfach aus Mangel an einem besseren Wort, Nachrichten ab.js. Weil ich eine Funktion namens message erstellen werde. Lassen Sie uns deshalb eine Funktion namens message erstellen. Um dies in JavaScript zu tun, verwenden wir einfach das Schlüsselwort function. Wir können es alles nennen, was wir wollen. Ich habe Nachricht angerufen. Dann definieren wir in diesen geschweiften Klammern , was wir passieren wollen. Ja, ich möchte nur das Wort Hello zurückgeben. Das ist alles, was ich tun möchte. Ja, ich könnte das im Browser ausführen. Dann können wir die Ergebnisse sehen. Warum benutze ich nicht einfach Coca? Ithaca ermöglicht es uns, JavaScript in diesem Texteditor in Echtzeit auszuführen , es ist sehr, sehr nützlich. Es ist übrigens kostenlos, meine Stimme liebte Mahila. Okay, was ich tun möchte, lasst uns diese Funktion konsolenprotokollieren. Ja, wir würden erwarten, dass das Ergebnis Hallo ist, was Sie auf dem Bildschirm sehen. Das ist intuitiv sinnvoll. Aber denk daran, was ich in der Vorlesung gesagt habe. Async kann vor jeder Funktion verwendet werden . Das ist ziemlich cool. Was haben wir vor unserer Funktion bearbeitet? Weißt du noch was ich gesagt habe? Asynchron zu verwenden bedeutet eine Sache. Anstelle von Funktion wird ein Versprechen zurückgeben. Testen wir es also. Stellen wir async vor unsere Funktion. Wenn wir diese Funktion ausführen, bekommen wir diesen Text nicht Hallo, wir bekommen ein Versprechen. Ist das nicht interessant? Das ist alles, was es tut. Dieses async-Schlüsselwort gibt ein Versprechen zurück, aber Clyde, können wir nicht einfach explizit ein Versprechen zurückgeben? Wir können, anstatt Hallo zurückzugeben, können wir nicht einfach einen Preis zurückgeben? Was machen sie? Das gibt uns genau das Gleiche , was uns ein Versprechen gibt, natürlich dieses Mal wird sich das nicht auf das Wort Hallo lösen. Wir haben es nicht in ihrem Tier. Und was wir tun könnten, ist dass wir die Ergebnismethode ausführen könnten. Und hier können wir das Wort Hallo eingeben. Es ist genau das Gleiche wie wir das tun, indem wir asynchron setzen, dann können wir asynchron loswerden. Wir werden genau das Gleiche bekommen. Anstatt also diesen großen Long Takes Lügen Namen zu schreiben, können wir das Wort asynchron setzen. Und natürlich brauchen wir jetzt keine vielversprechenden Ergebnisse. Wir können einfach zurückgeben, was wir wollen, von dem Versprechen zurückgegeben. Ergibt das einen Sinn? Bist du bei mir? Tut mir leid, Herbst. Das ist alles beim asynchronen Wort tut es. Async stellt sicher, dass die Funktion ein Versprechen zurückgibt. Einfach genug, tut das nicht nur. Es gibt ein anderes Keyword, das ich auslasse. Und das ist ein Warten. Wait funktioniert nur innerhalb von Funktionen mit dem Schlüsselwort async. Etwas Donner draußen, es regnet, es regnet. Wir brauchten es aber. Wir hatten seit ein paar Tagen keinen Regen . Wie auch immer, wo es war. Ja. Wir haben nur asynchron besprochen , das ein Versprechen zurückgibt. Aber in der nächsten Vorlesung möchte ich Ihnen etwas über das await-Schlüsselwort zeigen. Ich kann es kaum erwarten, es dir zu zeigen. 7. Einführung in das Await: Hall, alle guten Dinge gehen zu Ende und ein bisschen traurig, weil ich weiß, dass wir uns dem Ende dieses Kurses nähern. Aber keine Sorge, wir sind noch nicht ganz fertig . Wir sind noch nicht ganz fertig. Und ich stelle mir immer neue Kurse vor. Ich hoffe also, dass wir nicht ewig Wege hier waren. Aber wie auch immer, wir sprechen über asynchron und warten. Wir haben uns angeschaut, was das asynchrone Schlüsselwort tut. Erinnerst du dich noch? Das stimmt. Async stellt sicher, dass die Funktion ein Versprechen zurückgibt. Wir könnten das manuell machen, aber es ist einfach umständlich. Async ist also nur eine nette praktische Möglichkeit für uns, der Funktion mitzuteilen, dass wir uns ein Versprechen geben sollen. Das wissen wir. Aber jetzt möchte ich darüber reden warten. Das erste ist, dass es nur in asynchrone Funktionen funktioniert wenn Sie versuchen, das Wort „ Warten“ in einer Zufallsfunktion in einem Code zu verwenden Warten“ in einer Zufallsfunktion in einem Code . Es wird einfach nicht funktionieren. Sie müssen es innerhalb eines Versprechens verwenden, innerhalb einer Funktion mit dem Schlüsselwort async. Warte, tue, ich schätze, das eigentliche Wort selbst verrät es. Es lässt JavaScript warten bis sich ihr Versprechen geklärt hat und sein Ergebnis zurückgibt. Sehr, sehr intuitiv. Machen Sie jedoch einen Schritt zurück. Verirren Sie sich nicht bis ins Detail. Der Zweck von asynchron und warten ist es, die Syntax zu vereinfachen , die erforderlich ist, um versprechensbasierte APIs zu verwenden. Sie müssen nicht async warten, wenn Sie einen Fitch Ajax-Aufruf tätigen, Sie könnten einfach einfache zukünftige Tests mit all diesen dann Anweisungen durchführen und alle Bereiche im Catch-Block abfangen. Das ist vollkommen in Ordnung. Manchmal kann es jedoch chaotisch werden, manchmal wird es verwirrend. Und in den Fällen, in denen Ihr Code etwas unordentlich wird, möchten Sie oft auf asynchrone Verwendung zurückgreifen und warten. Es ist einfach viel einfacher zu lesen. Es ist viel einfacher zu folgen. Ich denke darüber nach, dass ich eine asynchrone Funktion übernehme. Innerhalb dieser asynchrone Funktion können Sie sich vorstellen, dass sie durch 0 oder mehr als Gewichtungsausdrücke geteilt wird . Und Ihr Code innerhalb dieser Funktion bis einschließlich des ersten Await-Ausdrucks wird synchron ausgeführt. Wir wissen, dass die synchrone Ausführung in JavaScript standardmäßig automatisch erfolgt. Und es ist nur, ob und wann es einen Await-Ausdruck innerhalb ihrer Funktion gibt. Weiß der Browser, dass diesen Code asynchron ausführen soll, auch bekannt als außerhalb des Hauptthread. Es ist sehr, sehr interessant, sehr intuitiv. Aber genug Gerede, genug Theorie. Lasst uns zur nächsten Vorlesung übergehen. Lasst uns hier aufhören. Und ich zeige Ihnen ein Beispiel async verwenden und ein Warten verwenden. Ich kann es kaum erwarten, es zu sehen, weißt du. 8. Beispiel für die Verwendung von Async / Await: Taten sprechen lauter als Worte, weshalb ich meine Beispiele liebe. Also lasst uns jetzt async verwenden und warten, und ich zeige Ihnen, wie es funktioniert. Es ist sehr, sehr interessant. Ich wollte eine Funktion namens message finden. Dann möchte ich hier eine ganze Menge Dinge ausführen. Wir merken, was ich tun möchte, ist, dass ich irgendwann das Ergebnis von Hello World bekommen möchte. Versuchen Sie schließlich , zu diesem Ergebnis zu gelangen , nur Text, der uns von der Konsole gegeben wurde, aber ich möchte es mit zwei asynchronen Funktionen tun. Teilen wir jedes Wort auf. Lassen Sie uns zuerst mit dem ersten Wort befassen es in eine Variable namens erstes Wort setzen. Und ich möchte jetzt Versprechen einsetzen. Normalerweise können wir das nicht tun, schaffen ein Versprechen und natürlich wissen wir, dass es uns Entschlossenheit und Ablehnung gibt. Wir verwenden die Reject-Eigenschaft sowieso nicht wirklich , dass sie da ist. Wenn wir wollten, können wir jetzt die setTimeout-Methode verwenden um einen API-Aufruf zu fälschen. Schaffen wir einfach Zeit, eine Zeitlücke. Natürlich möchte ich hier das Wort Hallo lösen, denn dies ist das erste Wort , das wir wollen, und ich möchte, dass dies 1 Sekunde dauert. Wir können das nicht machen. Weil warum? Stimmt das? Weil wir ein Versprechen umsetzen. Die Ergebnisse werden in diesem ersten Wort der Variablen nicht verfügbar sein . Das wird also nicht funktionieren. Damit es funktioniert. Wir möchten diese gesamte Funktion in eine asynchrone Funktion umwandeln . Wir tun dies, indem wir das Schlüsselwort async im Vordergrund verwenden. Wir wissen jetzt, dass diese Funktion uns ein Versprechen geben wird. Aber auch hier wird Zeile vier immer noch nicht funktionieren. Wir werden einen Fehler bekommen. Du glaubst mir nicht. Lass mich es dir zeigen. Lass mich es dir zeigen. Am Ende möchten wir Log konsolen. Ich weiß nicht, verwenden wir temporäre Literale. Wir können sagen „fertig“. Und natürlich haben wir hier das erste Wort. Das wird nicht funktionieren. Es führt jetzt unsere Funktion namens message aus. Wir erhalten nicht die Ergebnisse, die wir erwarten würden. Gehen wir in der Tat zum Browser. Da sind wir los. Fügen wir unseren Code ein, der die Nachrichtenfunktion ausgeführt hat. Da sind wir los. Wir werden undefiniert. Wir bekommen hier Fehler. Das ist ein Problem. Wir wollen das nicht, wir wollen nur die einfache Nachricht, hallo. Wird nicht funktionieren, weil dieses erste Wort, die Eigenschaftsvariable, noch nicht verfügbar ist, um zu warten, bis das Versprechen gelöst hat und sie in diese erste Wortvariable eingegeben wurden. Wir verwenden das await-Schlüsselwort. So einfach ist es, mit async zu arbeiten und zu warten. Nun, das ist das erste Wort. Bevor ich weitermache, erstellen wir einfach ein zweites Wort. Erstes Wort. Ja, wir können es zweites Wort nennen. Und wir wissen, dass das zweite Wort getäuscht wird. Los geht's. Wenn wir also Log konsolen und fertig sind, können wir das erste Wort sagen. Natürlich können wir Resolver haben, nicht die schönen, natürlich nicht definierten Ergebnisse. Und ich habe es RES genannt. Weißt du was soll ich ändern? Ich kann entweder dieses Ergebnis machen oder bei Arrays ändern, aber lassen Sie uns einfach diese Lösung treffen. Da sind wir los. Wenn wir diese Nachrichtenfunktion ausführen, sollte natürlich alles nach Plan verlaufen. Tritt zusammen auf, sagt uns, dass wir die Konsole protokolliert und fertig sind. Hallo World. Aber meine lieben Schüler, ich möchte, dass du verstehst warum. Lass mich einfach rauszoomen. Lass mich nach oben scrollen. Dies ist unser gesamter Codeblock. Lassen Sie mich erklären , was hier passiert. Und das wird sehr technisch sein, aber es ist sehr, sehr wichtig für Sie, dieses Beispiel zu verstehen. Wir haben auf Versprechen gewartet. Was wird passieren. Nun, okay, reden wir über den Code, der ausgeführt wird. Wir wissen, dass der Fortschritt diese Nachrichtenfunktion in drei Phasen durchläuft . Stufe eins, die erste Zeile des Funktionskörpers , wird synchron ausgeführt. Dies ist das Standardverhalten von JavaScript. Das bedeutet, dass wir auf die Linie gehen werden, dies ist das erste , was ausgeführt wird. Aber jetzt, wenn der Parser das Schlüsselwort auf das wait-Schlüsselwort trifft, weiß der Browser, dass es ein Malversprechen gibt. Es muss auf das warten, was passieren wird. Nun, das Ergebnis ist, dass der Fortschritt unserer Nachrichtenfunktion angehalten wird und die Kontrolle an die Umgebung zurückgegeben wird, die die Nachrichtenfunktion aufgerufen hat. In diesem Fall mische ich jede Funktion, die im Fensterbereich aufgerufen wird und nichts anderes passiert bei den Hauptbedrohungen und nichts anderes wird passieren. Aber das passiert hinter den Kulissen. Phase bis irgendwann später, als das erste Versprechen entweder für Fold oder abgelehnt wurde. Die Steuerung wird in diese Nachricht zurückgehen. Funktion, das Ergebnis des ersten Versprechens, hören Sie das Wort Hallo. Es wird aus dem await-Ausdruck zurückgegeben. Hier. Das Wort hallo wird der Variablen namens erstes Wort zugewiesen. Das ist erledigt. Der Fortschritt wird dann fortgesetzt. In der Vergangenheit wird jetzt das zweite await-Schlüsselwort angezeigt. Auch hier weiß der Browser, dass es ein ausstehendes Versprechen gibt auf das er warten und fortschreiten muss. Und wie viele solcher Funktionen werden jetzt wieder pausiert. Und die Kontrolle wird der Umwelt zurückgegeben. Diese kalte Botschaft. Wir wiederholen den Prozess hier nur. Letzt wird die Kontrolle in Phase drei, irgendwann später, wenn die zweiten Versprechen entweder erfüllt oder abgelehnt wurden, irgendwann später, wenn die zweiten Versprechen entweder erfüllt oder abgelehnt wurden, diese Nachrichtenfunktion erneut eingeben. Natürlich ist das Ergebnis der zweiten Versprechensentschließung Rückkehr aus dem zweiten Warteausdruck. In unserem Beispiel ist das Wort Welt einer Variablen zugeordnet, die wir als zweites Wort definiert haben. Aber jetzt ist der entscheidende Unterschied, denn jetzt haben wir kein anderes await-Schlüsselwort. Die Steuerung bewegt sich durch diese Nachrichtenfunktion trifft schließlich auf einen Rückgabeausdruck. Hier protokollieren wir einfach etwas auf dem Bildschirm. Hast du es verstanden? Ich habe dir gesagt, dass das sehr fortgeschritten ist. Ich hoffe, du verstehst, ich hoffe ich erkläre, bis du genug wirklich ganz intuitiv bist, wenn du verstehst, wie es funktioniert. Aber bevor ich diese Vorlesung beende, lass mich dir einfach noch eine Frage stellen. Denken Sie daran, dass ich gesagt habe, dass wenn das Schlüsselwort für Schulden vom Parser getroffen wird, sagte ich, dass die Kontrolle an die Umgebung zurückgegeben wird, die aufgerufen hat, die IT überhaupt funktioniert . Denken Sie daran dass ich das gesagt habe und er hat die Fensterumgebungen und sonst passiert nichts. Aber was meine ich? Was ist, wenn es nicht das Fensterobjekt , das diese Nachrichtenfunktion genannt hat? Was ist, wenn es eine andere Funktion wäre? Ich weiß, dass es etwas kompliziert wird, aber lass mich dir zeigen, was ich meine. Lass uns hier runter gehen. Das führt diese Funktion nicht aus lassen Sie es uns einfach auskommentieren. Nehmen wir an, wir haben eine andere Funktion. Und diese Funktion, nennen wir einfach execute aus Mangel an einem besseren Wort. Und innerhalb dieser Funktion möchten wir diese Nachrichtenfunktion ausführen. Und wir wollen, dass ein Konsolenprotokoll zuerst an der Konsole kommt. Im Moment habe ich diese Funktion nicht ausgeführt, wir haben sie gerade definiert, aber was denkst du, wird jetzt passieren, basierend auf dem, was ich vor ein paar Augenblicken gesagt habe, um die Straße in einer billigen Kopie zu veranschaulichen diese beiden Funktionen, Browser, Konsole. Was passiert, ich führe diese Funktion aus. Lass es uns versuchen. Wie großartig ist es, dass wir hingerichtet werden? Ich bin der Erste, zuerst. Und erst wenn all diese festgelegten Timeouts gelöst haben , dass wir das Wort erledigt haben, kehrte Hello World zu uns zurück. Oder einfach nur Studenten, wie großartig ist das? Was dabei allerdings wirklich cool ist, ist, dass Sie verstehen, was hinter den Kulissen passiert. Denn wenn der Parser auf das erste await-Schlüsselwort trifft, wird dies die Kontrolle von dieser Nachrichtenfunktion an die Umgebung geben Kontrolle von dieser Nachrichtenfunktion an die Umgebung es dann aufrufen, und das ist diese Execute-Funktion. Und es wird weiterhin Code synchron ausführen. Wir wissen, während es pausiert und obwohl dies eine Lösung verspricht, wissen wir, dass dieses Konsolenprotokoll zuerst an uns weitergegeben werde , bevor die gesamte Nachrichtenfunktion ausgeführt wurde. Der Grund, warum ich übrigens zum Browser gehen musste , wenn ich diese Funktion jetzt ausführe, warum zeigt sie nichts an? Coca-Cola und zeige uns die Reihenfolge, in der Dinge getan werden. Also können wir hier sehen, dass wir kriegen, ich bin zuerst n, wir sind fertig. Hallo Welt. Wir können die Reihenfolge nicht sehen, wann es passiert ist. Deshalb wollte ich dir hier zeigen, wie es funktioniert. Lassen Sie mich Ihnen noch einmal zeigen, dass Sie tatsächlich sehen können wie lange es braucht, um diese Timeouts auszuführen. Es ist faszinierend. Definieren wir also unsere Funktionen. Lass es uns ausführen. Wir bekommen sofort, ich muss zuerst zwei Sekunden warten und dann erledigen wir das. Faszinierend. Ich möchte hier aufhören. Ich möchte eine Pause machen. In der nächsten Vorlesung zeige ich Ihnen ein weiteres kurzes Beispiel und nenne schließlich, ich möchte, dass wir das Gelernte verwenden. Ich möchte, dass wir das Schlüsselwort async and await verwenden, um den Code zu verbessern, den wir zuvor an anderen Beispielen gemacht haben . Ich kann es kaum erwarten und wir sehen uns in der nächsten Vorlesung. Okay. 9. Zweites Beispiel für die Verwendung von Async/Await: Weißt du, ich liebe meine Beispiele, weil ich wirklich denke, dass Beispiele den Punkt nach Hause treiben. Ich möchte nur, dass Sie sich sehr an das Konzept des Windes gewöhnen , das erwartet Keyword wird von der Pasa getroffen. Fortschritt der gesamten Ausführung in JavaScript ist in dieser Funktion dünn und die Steuerung wird der Umgebung gegeben , die diese Funktion natürlich ausgeführt hat. Ich möchte nur, dass du dich an dieses Konzept gewöhnst. Warum erstellen wir also keine asynchrone Funktion, damit wir wissen, dass sie ein Versprechen zurückgeben wird. Wir verwenden das Schlüsselwort function in JavaScript. Nennen wir es einfach foo. Das ist nur Mock Convention. Ich weiß nicht, warum wir ständig Essen benutzen. Es ist nur eine erfundene Funktion. Es ist nur ein Funktionsname. Wir hätten es so nennen können, was wir wollen. Ich möchte jetzt ein Versprechen definieren und es instanziiert die versprochene Konstruktorfunktion. Wir wissen, dass wir X's in unserer Konstruktorfunktion auflösen und ablehnen müssen. Natürlich, was wollen wir hier passieren? Holt einfach alle Klammern und all das sortiert. Wir sind bereit zu exekutieren. Alles was ich tun möchte ist, dass ich die setTimeout-Methode implementieren möchte. Ich möchte nicht wirklich, dass irgendetwas anderes passiert als dieses Versprechen zu lösen. Und wir können das Wort Hallo lösen. Wie ist es? Ziemlich einfach in einhundert, zehnhundert Millisekunden. Hier geht's alles sehr einfache asynchrone Funktion namens foo. Das nächste, was ich tun wollte, wollte ich das gerade nicht ausführen . Weißt du was ich machen werde? Schreiben wir das einfach in unserem Bundesstaat an der F, einfach einfacher zu sehen, was los ist. Natürlich, es sei denn, Kapital N für neues hemmen. Da sind wir los. Jetzt werde ich den Texteditor wenigstens sagen, dass alles eine K. Syntax ist sehr wichtig, wenn es um die Programmierung geht. Offensichtlich versteht Ihr Computer nur Eins und Neben, auch bekannt als elektrische Impulse. Es ist Müll rein, Müll effektiv, wenn ich einen Fehler mache, wenn ich es nicht tue, wenn ich dieses Versprechen nenne, wird die JavaScript-Engine nicht verstehen, was das ist, wird es sein. Müll. Jedenfalls ist das neue Keyword deshalb sehr spezifisch. Und JavaScripts, ich muss Kleinbuchstaben verwenden. Das war mein Fehler. Wie auch immer, wir sind immer noch in dieser Funktion foo. Wir haben ein Versprechen umgesetzt. Das Versprechen wird sich mit dem Wort Hallo in 1 Sekunde lösen . Nun, das möchte ich Ihnen bis zu diesem Zeitpunkt zeigen , dass wir das Gewicht-Schlüsselwort nicht verwendet haben. Was ich tun möchte, ist, dass ich eine Nachrichtenvariable definieren möchte. Und lasst uns dieses Versprechen abwarten. Um zu verstehen, was es ist, versuche ich zu tun. Ich warte, bis das obige Versprechen mit dem Wort Hallo gelöst ist. Das werde ich tun. Und dann werde ich es in eine Variable namens Message einfügen . Interessant. Was ich dann tun möchte, ist natürlich, dass ich eine Nachricht an den Browser warnen möchte . Ich möchte, dass das kleine Pop-up auftaucht und ich möchte, dass wir das Wort Hallo sehen . Gehen wir zum Browser. Ist klar, alles ist definiert unsere Funktion. Los geht's, wir haben es definiert. Lassen Sie mich angesichts unserer Gespräche, die wir geführt haben, ein wenig hineinzoomen . Angesichts des Beispiels, das ich Ihnen in der vorherigen Vorlesung gezeigt habe. Ich möchte, dass du logisch denkst, was hier passiert. Nun, zuerst führen wir diese Funktion einfach aus , damit Sie sehen können, was passiert. Wir haben es hingerichtet. Resolve ist nicht definiert. Lasst uns das klären. Ich hab es genannt. Lasst uns erheben. Los geht's. Und rufen wir die Funktion noch einmal auf. Da sind wir los. Und wir bekommen den Alarm, der Hallo sagt. Das geschah natürlich nach einer Sekunde, wie wir erwarten würden. Da sind wir los. Das ergibt Sinn. Aber verstehst du jetzt die Logik? Lassen Sie mich die Logikstufe erklären. Du weißt es wahrscheinlich schon, aber lass mich den Punkt nach Hause fahren. Schauen wir uns unseren Code an. Die Funktionsausführung wird welche Linie ziehen? Nun, es wird pausieren , wenn es auf das wawait-Schlüsselwort trifft. Es wird online innehalten, in gegessen. Wir wissen, welche Umgebung diese Funktion foo genannt hat, dass der Schmerz weiterhin synchron ausgeführt wird . Wenn das Versprechen schließlich ein Ergebnis zurückgibt, wird die Kontrolle an diese foo Funktion zurückgegeben. Natürlich führen wir dann diese Warnmeldung aus, was sinnvoll ist. Das möchte ich hervorheben. Die Verwendung des Wortes „warten“ unterbricht buchstäblich die Funktionsausführung und sagt, dass sich das Versprechen abschließt. Es wird dann mit dem Versprechensergebnis fortgesetzt. Dies kostet keine CPU-Ressourcen da die JavaScript-Engine andere Jobs erledigen kann. In der Zwischenzeit kann es andere Funktionen oder die Skripte ausführen , die Beans usw. verarbeiten. Es ist sehr, sehr mächtig. Aber jedenfalls denke ich, dass Sie ein hohes Verständnis haben ein hohes Verständnis genug ist, um tiefer in Asynchron zu graben und zu warten. Bevor wir diesen Abschnitt, diesen Kurs, beenden , möchte ich, dass Sie das Gelernte auf praktische Weise nutzen. In der nächsten Vorlesung möchte ich einen Code aufrufen, den wir uns zuvor angeschaut haben. Und ich möchte, dass Sie versuchen, diesen Code zu konvertieren oder ihren Code zu verbessern, indem Sie async verwenden und warten. Ich kann es kaum erwarten und wir sehen uns bald. 10. Challenge Einführung – Verbesserung des -: Willkommen, willkommen, willkommen. Wenn du viel Spaß hast. Nun, alles klar, hier sind wir. Dies ist Code aus ein paar Abschnitten, Klassen, Beck und Sie wissen, die Schublade wir hatten diese Fitch-API , die Anrufe für verschiedene Websites tätigte. Die erste Feature-Anforderung bestand darin, diesen Treffer durch unsere IP-Adresse zu ersetzen. Meiner funktioniert momentan nicht, weil ich in Simbabwe in Afrika bin. Und hey, manchmal haben wir keine Macht. Gerade jetzt. Ich habe keinen Strom, keinen Strom. Und das bedeutet natürlich kein Router und Wi-Fi. Also kann ich diesen Code gerade nicht mit dir probieren. Aber was ich tun kann, ist, dass wir unseren Code verbessern ihn umgestalten können. Das zweite Gesicht dein Quiz, wir haben den Rest auf unserem eigenen Server gemacht, ein Bild gezeigt, auf den Button geklickt und wir zeigen Ajax. Wenn wir zu unserem Code gehen, können wir hier unten in der Datei sehen, dies ist unsere Feature-Suche nach diesen Bildern. Und es gibt viele Themenaussagen. Es ist eine Catch-Aussage. Ich möchte, dass Sie darüber nachdenken, wie wir dies ändern können, wie wir diesen Code mithilfe von async verbessern können und warten, es selbst ausprobieren können. Stoppen wir die Vorlesung hier. Lassen Sie es mich in der nächsten Vorlesung mit Ihrem Kanal kodieren und wir sehen uns in Kürze. 11. Challenge – Abholen unseres Bildes mit async/await: Hast du es ausprobiert? Ich hoffe es. Ich hoffe es, weil das das Wichtigste ist. Es spielt keine Rolle, ob du es nicht richtig verstanden hast. Das Wichtigste ist, dass du es ausprobiert hast. Lassen Sie mich das stückweise tun damit Sie verstehen, was passiert. Du hast vielleicht gedacht, Hey, wir wissen, dass Fetch ein Versprechen zurückgibt. Wir beschäftigen uns mit Versprechen, damit wir asynchron umgehen und warten können. Aber schon vorher denken Sie vielleicht, hey, lassen Sie uns das in eine Variable namens Response einfügen. Und wir können diese Fetch-Funktion ausführen. Weißt du was? Lassen Sie mich einfach, lassen Sie mich einfach alles andere kommentieren. Lass uns Esel verwirren. Du hast vielleicht gedacht, okay, lass uns unsere Antwort greifen. Wir wissen, dass Sie sich bei Antworten über einen lesbaren Stream wohl gefühlt haben, nun, versuchen wir, die Daten zu extrahieren, indem Sie diese Antwort nehmen und die Blob-Methode darauf ausführen. Weil wir wissen, dass es sich um ein Bild handelt. Es sind Binärdaten, es ist kein JSON. Dann lassen Sie mich natürlich einfach die nächsten Codezeilen hier kopieren. Du wurdest vielleicht gerettet. Definieren wir eine Bild-URL, indem die URL-Schnittstelle verwenden und dieses Datenobjekt übergeben. Könnte das versucht haben. Nehmen Sie dann natürlich die Bildquellenelemente und weisen Sie sie dieser Bild-URL zu. Der letzte Schritt besteht natürlich darin, den Erfolg auf dem Bildschirm zu konsolenprotokollieren . Wird das funktionieren? Nun, testen wir es aus und gehen wir zu unserem Browser. Wenn ich jetzt auf den Button klicke, funktioniert es natürlich nicht. Welche Fehlermeldungen bekommen wir. Wir erhalten eine Fehlerantwort vom Typ. Blob ist keine Funktion. Verstehst du warum? Warum bekommen wir diesen Typfehler? Nun, wenn wir zu unserem Code zurückkehren, denken Sie daran, dass der Grund, warum wir diese Ära bekommen darin besteht, dass obwohl wir wissen das Antwortobjekt die Blob-Methode hat, wenn der Browser zur nächsten Zeile von Code ist online 97 und Alkane, das Antwortobjekt, diese Variable. Es ist noch nicht von der Phagenkohle zurückgekehrt. Denken Sie daran, dass Fitch-Aufruf auf einem anderen Thread abgesehen von drei erfolgt, der parallel zum Hauptthread erstellt wird. Deshalb bekommen wir einen Fehler. Okay, der Kunde will oder nicht, dann füge einfach das Wort „ Warten“ vor Fitch und warte vor der Blob-Methode, oder? Das sind die einzigen beiden , die ein Versprechen zurückgeben, also müssen wir nirgendwo anders warten. Funktioniert das? Nun, das wird auch nicht funktionieren. Gehen wir zum Browser und aktualisieren alles. Kreuzen Sie den Knopf an. Es funktioniert nicht. Es wird nicht funktionieren. Warum wird es nicht funktionieren? Das stimmt. Weil Sie warten innerhalb einer sinc-Funktion verwenden müssen. Dann müssen wir unseren Code nur ein bisschen weiter erweitern. Aber Sie werden sehen, dass es sich lohnt, weil es sehr einfach zu lesen ist. Denken Sie daran, dass wir das async-Schlüsselwort benötigen und dann eine Funktion definieren müssen. Sagen wir einfach, es heißt Fitch-Image und alles befindet sich in diesen geschweiften Klammern. Los geht's und fangen an, Sinn zu ergeben. Jetzt haben wir eine Funktion definiert. Wir haben den asynchrone Keyword-Tag gesetzt, wir verwenden ein Gewicht. Wir können es synchron lesen. Und natürlich müssen wir diese Funktion tatsächlich implementieren oder ausführen, oder? Sonst wird nichts passieren. Da gehst du. So verwenden wir async und warten. Wird das funktionieren? Was denkst du? Gehen wir zum Browser. Klicken Sie auf das Bild. Wow, das ist sehr, sehr cool, nicht wahr? Verirren Sie sich nicht im Detail. Es ist sehr einfach zu lesen. Ich werde die Logik nicht im Detail durchgehen , weil Sie bereits wissen, wie das funktioniert. Aber denken Sie daran, in unserem ursprünglichen Code, wenn Sie hier nach unten scrollen, haben wir tatsächlich ein paar andere Funktionen implementiert, den Status überprüfen und in Blob konvertieren. Genau hier. Wir umgehen die Dinge , die nicht gut sind. Wir möchten den Status überprüfen und möchten unsere Logik an einen anderen Ort stellen. Wenn wir nach oben scrollen, haben wir den Abschnitt „ Universal Functions“. Wir haben bestimmte Funktionen definiert. Wir haben eine Funktion namens Check Status definiert. Aber was ist interessant daran? Das stimmt. Es gibt ein Versprechen zurück. Interessant. Und ich werde Funktion konvertiert in Blob gibt auch ein Versprechen zurück , weil wir wissen, dass die Blob-Methode ein Versprechen zurückgibt. Warum haben wir diesen Code etwas verbessert? Ich denke, die erste Zeile ist in Ordnung. Die Antwort ist, was wir von unserer fitten Kohle zurückbekommen. Dann wollen wir uns nur mit einer guten Resonanz auseinandersetzen. Eine Antwort. Ich möchte unsere Blob-Funktion nicht ausführen. Was ich tun möchte, ist, dass ich unsere Statusprüffunktion implementieren möchte und wir unser Antwortobjekt übergeben. Das wissen wir. Sobald wir diese gute Antwort haben, ist der nächste Tipp, sie in einen Blob umzuwandeln. Warum nennen wir es also nicht in einem Blob-Daten aus Mangel an einem besseren Wort. Und ja, wir können unsere Funktion Convert to Blob ausführen. Das wird unsere guten Antwortdaten erfordern. Da sind wir los. Wir haben buchstäblich das sollte funktionieren. Wenn wir zum Browser gehen, alles, klicken Sie auf das Bild. Referenzzeitalter, Tochter ist nicht definiert. Was habe ich falsch gemacht? Daten hier sollten gebloggt werden Tochterkurs. Gehen wir zurück zu unserem Browser. Klicken Sie auf Bild anzeigen. Wie großartig ist das? Wie großartig ist das? Ich bin sehr, sehr zufrieden damit. Meine lieben Schüler, Wie cool war das? Jetzt möchte ich, dass wir den Vortrag hier unterbrechen. Es wird die Vorlesung hier beenden. Ich möchte, dass du versuchst, genau das Gleiche zu tun , den Code zu verbessern. Aber wenn ich nach oben scrolle, möchte ich, dass Sie dasselbe tun, um die IP-Adresse abzurufen. Hier ist es, die Fitch Kohle , um unsere IP-Adresse zu bekommen. Stoppen Sie den Vortrag hier, versuchen Sie es selbst umzuwandeln. Und dann zeige ich dir in der nächsten Vorlesung, wie ich es gemacht habe. 12. Challenge – Abrufen unserer IP-Adresse mit async/await: Hast du es ausprobiert? Ich hoffe es. Ich hoffe es. Und ich habe immer noch kein Internet hier endet und wir haben keinen Strom. Ich kann es also nicht schmecken, aber ich schreibe es mit dir ab. Wenn es nicht korrekt ist, lass es mich bitte in den Fragen und Antworten wissen und ich werde es reparieren, aber hoffentlich herrschen logisch vor und es wird Sinn machen. Wie wandeln wir das um? Wie reparieren wir es? Nun, lasst uns zuerst den ganzen Block loswerden. Wenn wir es nicht brauchen. Es ist jetzt eine asynchrone Funktion definiert. Wir können das Schlüsselwort function in JavaScript verwenden. Wir können es Fitch IP nennen , weil es genau das ist, was wir in diesem Codeblock machen , können wir unsere tatsächliche Anpassung Ihrer Frage ausführen , was kommt als nächstes? Was machen wir? Nun, ich weiß es nicht. Sagen wir einfach unsere Reaktion auf den ländlichen Raum. Ich zeige dir nur, dass wir es definieren können. Alles, was wir wollen, ist das Ergebnis dieser Fitch-Anfrage. Und natürlich verwende ich hier das async-Schlüsselwort, weil wir wissen, dass diese Feature-Anforderung ein Versprechen zurückgibt. Was kommt als Nächstes? Nun, wir wollen es überprüfen, wir haben eine gute Antwort. Definieren wir also eine Variable, die als gute Antwort bezeichnet wird , und führen wir unsere Kontrollstatusfunktion aus, die wir in sie eingehen, unsere Reaktion auf den ländlichen Raum. Man kann wirklich sehen, dass dies sehr, sehr einfach ist , es ist sehr intuitiv. Wir wissen, dass wir, sobald wir die Antwort von dieser FetchRequest zurückhaben, den Stream erneut verdoppeln müssen. Wir wissen, dass es Jason ist, weil wir diese Weltzeit-API-URL anrufen und uns mitteilt, dass wir JSON-Daten zurückgegeben werden. Was wir tun wollen, ist, dass wir tatsächlich eine Variable namens data definieren möchten, die JSON sein wird. Eigentlich ist es das nicht, es wird ein JavaScript-Objekt sein, aber wir wissen, dass es das Ergebnis sein wird dass die JSON-Methode kalt ist. Wir verwenden das Schlüsselwort warten noch einmal, wenn wir eine gute Antwort herausnehmen, wissen wir, dass es diese JSON-Methode hat. Jetzt lasst uns die JSON-Methode. Wir wissen aus früheren Vorträgen , dass Schulden uns ein Versprechen zurückgeben. Deshalb müssen wir das Schlüsselwort „await“ verwenden. Natürlich können wir das gleiche Reifenbeispiel beenden. Durch das Ergreifen unserer IP erfolgt die Abfrageselektor. Wir können unser HTML-Element mit einer ID von IP Takes greifen, ich denke, das nennen wir es. Das ist Scroll nach oben. Das sind Header-IP-Takes, Kannst du es sehen? Lass uns klein gehen. Wenn ich nehme, machen wir einfach kleine Zähne. Dies ändert seine innere HTML-Eigenschaft in das, was wir über dieses JavaScript-Objekt wissen. Lasst uns sie uns zurückgeben. Es hat eine Eigenschaft namens Client-IP. Wir haben das schon mal gemacht. Weißt du wovon ich rede? Das sollte funktionieren. Eigentlich sollte es das nicht tun, weil wir noch keine Funktion ausgeführt haben. natürlich außerhalb dieses Codeblocks Lassen Sie uns diese Funktion natürlich außerhalb dieses Codeblocks ausführen. Mit Studenten sollte das funktionieren. Wie ich bereits erwähnt habe, habe ich keine Macht. Es wird also nicht für uns funktionieren. Deshalb wurde dieser Schlaggeschmack nicht ersetzt. Aber du verstehst den Punkt. Ich denke, diese Logik wird bestehen, wenn etwas damit nicht stimmt. Bitte schau einfach in den Kommentaren nach. Einige Kurzfilme wurden bereits gelöst. Aber ja. Ja. Hoffe du hast Spaß. Ich würde Spaß haben. Es gibt nur noch eine Sache, die ich erwähnen möchte. Das ist Epochen. Gerade jetzt. Wir fangen hier keine Fehler auf. Weißt du was, lass mich löschen und lass mich jetzt den gemeinsamen Tag behalten. Es ist in Ordnung. Aber wenn wir jetzt zu unserem Image, Kohle, zurückkehren, haben wir es nicht mit Gebieten zu tun. in der nächsten Vorlesung einfach schnell zeigen, Lassen Sie mich in der nächsten Vorlesung einfach schnell zeigen, wie wir mit einem Try and Catch Block umgehen können , um mit Fehlern umzugehen. Ich kann es kaum erwarten. 13. Fehlerbehandlung mit Try and Catch: Das letzte, worüber ich mit Ihnen sprechen möchte, ist die Fehlerbehandlung. Ich meine, wir wissen, dass wir Check Status Convert in Blob ausführen. Und wenn wir zu diesen Funktionen oben in unserem Code gehen, haben wir eine gewisse Fehlerbehandlung. Wir nennen es Ablehnungsmethode. Wenn die Antwort beispielsweise in Ordnung ist, ist die Eigenschaft false. Aber was passiert, wenn wir andere Bereiche haben? Was ist, wenn wir Bereiche haben, die nicht in diesen Codeblöcken enthalten sind? Nun, es gibt eine sehr einfache Lösung dafür. Und das heißt, wir können unseren gesamten Codeblock in eine try-Anweisung umwickeln . Sehr, sehr nützlich, sehr, sehr intuitiv. Also verschieben wir einfach unseren Code in diesem Try-Block. Und was das bewirkt, ist, dass alle Bereiche von diesem Fangblock gefangen werden können . Natürlich erhalten wir ein Fehlerobjekt zurück , das wir in jede Variable einfügen können. Wir setzen es in eine Variable namens Era ein. Und dann wird diese Callback-Funktion medizinisch ausgeführt und natürlich können Sie tun, was Sie wollen. Diese Konsole protokolliert die Air-Objekt-Wette an den Benutzer. Okay, also können wir das buchstäblich einfach machen, es in einen Versuch stecken und Taschen fangen. Ganz einfach. Ich sagte dir doch, ich hab dir gesagt, dass es nicht schwierig wird. Und dann hast du einen Fehler, wie eine falsche URL. Gehen Sie zum Browser, gehen Sie zur Konsole und klicken Sie auf das Bild. Wir bekommen einen Fehler. Und das ist unser benutzerdefinierter Fehler. Lass es mich dir einfach beweisen. Hallo World. Wir haben, lass uns zurück zum Browser gehen. Klicken Sie auf das Bild, und dann gehen wir los, Hello world. Ups, dieser Catch-Block fängt den Fehler tatsächlich ab. Ich hoffe, dass das alles einen Sinn ergibt. Wenn ich viel Spaß an diesem Falschen hatte, haben wir eine Menge Informationen abgedeckt. einen Schritt zurückgehen, möchte ich, dass Sie erkennen , dass Sie wirklich einen langen Weg zurückgelegt haben. Sie wissen, was JSON-Daten sind, XML-Daten, Sie kennen die Geschichte von Ajax, woher sie stammen. Sie wissen, was eine Konstruktorfunktion ist, mit der wir das XHR-Objekt verwendet haben . Und die Liste geht weiter. Walden, klopfe dich auf den Rücken. Dort haben wir es. Sehr, sehr einfach. Das war eine sehr schnelle Vorlesung. Ich hoffe, Sie können anfangen, die Möglichkeit zu sehen async zu verwenden und warten.