Erste Schritte mit JavaScript Promises

Asynchroner Code ist nützlich für die Ausführung von Aufgaben, die zeitaufwendig sind, aber natürlich nicht ohne Nachteile . Async-Code verwendet Callback-Funktionen, um seine Ergebnisse zu verarbeiten, jedoch können Callback-Funktionen keine Werte zurückgeben, die typische JavaScript-Funktionen können.

Sie nehmen uns nicht nur die Kontrolle über die Ausführung der Funktion, sondern machen auch die Fehlerbehandlung ein wenig mühsam. Dies ist der Promise dem das Promise Objekt ankommt, da es darauf abzielt, einige der Schlaglöcher in der asynchronen Codierung zu füllen.

Promise ist technisch ein internes Standardobjekt in JavaScript, dh es ist in JavaScript integriert . Es wird verwendet, um das mögliche Ergebnis eines asynchronen Codeblocks darzustellen (oder der Grund, warum der Code fehlgeschlagen ist) und verfügt über Methoden, um die Ausführung des asynchronen Codes zu steuern.

Syntax

Mit dem new Schlüsselwort können wir eine Instanz des Promise Objekts erstellen:

 neues Versprechen (Funktion (auflösen, ablehnen) {}); 

Die Funktion, die als Parameter an den Promise() Konstruktor übergeben wird, wird als Executor bezeichnet . Es enthält den asynchronen Code und zwei Parameter des Typs Function, die als resolve und reject bezeichnet werden (mehr dazu kurz).

Zustände des Promise Objekts

Der Anfangszustand eines Promise Objekts wird als ausstehend bezeichnet . In diesem Zustand existiert das Ergebnis der asynchronen Berechnung nicht .

Der anfängliche anstehende Status ändert sich in den erfüllten Zustand, wenn die Berechnung erfolgreich ist . Das Ergebnis der Berechnung ist in diesem Zustand verfügbar.

Falls die asynchrone Berechnung fehlschlägt, wird das Promise Objekt aus seinem anfänglichen anstehenden Zustand in den zurückgewiesenen Zustand versetzt. In diesem Zustand wird der Grund des Berechnungsfehlers (dh der Fehlermeldung) zur Verfügung gestellt.

Um von einem ausstehenden in einen erfüllten Zustand zu gelangen, wird resolve() aufgerufen . Um von einem ausstehenden in einen abgelehnten Status zu gelangen, wird reject() aufgerufen .

Wenn der Status von " ausstehend" in " erfüllt" wechselt, wird der Event-Handler der Methode " Promise " ausgeführt. Wenn der Status von " Ausstehend" zu " Abgelehnt" wechselt, wird der Ereignishandler der Fangmethode des Promise Objekts ausgeführt.

Beispiel 1

"Nicht Promitisierter" Code

Angenommen, es gibt eine hello.txt Datei mit dem Wort "Hello". So können wir eine AJAX-Anforderung schreiben, um diese Datei abzurufen und ihren Inhalt anzuzeigen, ohne das Promise Objekt zu verwenden:

 Funktion getTxt () {let xhr = new XMLHttpRequest (); xhr.open ('GET', 'Hallo.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {try {switch (this.status) {Fall 200: document.write (this.response); Unterbrechung; Fall 404: Wirf 'Datei nicht gefunden'; Standardwert: throw 'konnte die Datei nicht abrufen'; }} catch (err) {console.log (err)}}; } getTxt (); 

Wenn der Inhalt der Datei erfolgreich abgerufen wurde, dh der Antwortstatuscode ist 200, wird der Antworttext in das Dokument geschrieben . Wenn die Datei nicht gefunden wird (Status 404), wird eine Fehlermeldung "Datei nicht gefunden" ausgegeben. Andernfalls wird eine allgemeine Fehlermeldung ausgegeben, die angibt, dass das Abrufen der Datei fehlgeschlagen ist.

"Promisified" -Code

Lassen Sie uns den obigen Code promoten :

 Funktion getTxt () {return new Promise (Funktion (auflösen, ablehnen) {xhr = new XMLHttpRequest (); xhr.open ('GET', 'hallo.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {switch (this.status) {Fall 200: resolve (this.response); Fall 404: reject ('Datei nicht gefunden'); Standard: reject ('Failed to hole die Datei ');}};}); } getTxt (). then (function (txt) {document.write (txt);}). catch (funktion (err) {console.log (err);}); 

Die Funktion getTxt() ist nun so codiert, dass sie eine neue Instanz des Promise Objekts getTxt(), und ihre Executor-Funktion enthält den asynchronen Code von vor.

Wenn der Antwortstatuscode 200 ist, wird das Promise durch Aufrufen von resolve() erfüllt (die Antwort wird als Parameter von resolve() ). Wenn der Statuscode 404 oder ein anderer ist, wird das Promise mit reject() abgelehnt (mit der entsprechenden Fehlermeldung als Parameter von reject() ).

Die Ereignishandler für die Methoden then() und catch() des Promise Objekts werden am Ende hinzugefügt .

Wenn das Promise erfüllt ist, wird der Handler der then() -Methode ausgeführt. Sein Argument ist der Parameter, der von resolve() . Innerhalb des Ereignishandlers wird der Antworttext (als Argument erhalten) in das Dokument geschrieben .

Wenn die Promise abgelehnt wird, wird der Ereignishandler der catch() -Methode ausgeführt und protokolliert den Fehler .

Der Hauptvorteil der obigen Promisified-Version des Codes ist die Fehlerbehandlung . Anstatt Uncaught Exceptions herumzuwerfen - wie in der nicht-promifizierten Version - werden die entsprechenden Fehlermeldungen zurückgegeben und protokolliert.

Aber es ist nicht nur die Rückgabe der Fehlermeldungen, sondern auch das Ergebnis der asynchronen Berechnung, die für uns wirklich vorteilhaft sein kann. Um das zu sehen, müssen wir unser Beispiel erweitern.

Beispiel 2

"Nicht Promitisierter" Code

Anstatt nur den Text von hello.txt, möchte ich ihn mit dem Wort "Welt" kombinieren und nach einer Zeit von 2 Sekunden auf dem Bildschirm anzeigen. Hier ist der Code, den ich verwende:

 Funktion getTxt () {let xhr = new XMLHttpRequest (); xhr.open ('GET', 'Hallo.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {try {switch (this.status) {Fall 200: document.write (concatTxt (this.response)); Unterbrechung; Fall 404: Wirf 'Datei nicht gefunden'; Standardwert: throw 'konnte die Datei nicht abrufen'; }} catch (err) {console.log (err)}}; } Funktion concatTxt (res) {setTimeout (function () {return (res + 'Welt')}, 2000); } getTxt (); 

Im Statuscode 200 wird die Funktion concatTxt() aufgerufen, um den Antworttext mit dem Wort "Welt" zu verketten, bevor er in das Dokument geschrieben wird.

Aber dieser Code wird nicht wie gewünscht funktionieren . Die setTimeout() Callback-Funktion kann die verkettete Zeichenfolge nicht zurückgeben . Was im Dokument concatTxt() ist undefined weil concatTxt() zurückgibt .

"Promisified" -Code

Also, um den Code arbeiten zu lassen, promoten wir den obigen Code, einschließlich concatTxt() :

 Funktion getTxt () {return new Promise (Funktion (auflösen, ablehnen) {xhr = new XMLHttpRequest (); xhr.open ('GET', 'hallo.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () {switch (this.status) {Fall 200: resolve (this.response); Fall 404: reject ('Datei nicht gefunden'); Standard: reject ('Failed to hole die Datei ');}};}); } Funktion concatTxt (txt) {return new Versprechen (Funktion (auflösen, ablehnen) {setTimeout (function () {auflösen (txt + 'Welt');}, 2000);}); } getTxt (). then ((txt) => {zurück concatTxt (txt);}). then ((txt) => {document.write (txt);}). catch ((err) => {Konsole. log (err);}); 

Genau wie getTxt() gibt die Funktion concatTxt() auch ein neues Promise Objekt statt des verketteten Textes zurück. Das von concatTxt() Promise wird innerhalb der Callback-Funktion von setTimeout() .

Gegen Ende des obigen Codes wird der Ereignishandler der ersten then() -Methode ausgeführt, wenn die Promise von getTxt() erfüllt ist, dh wenn die Datei erfolgreich abgerufen wurde . Innerhalb dieses concatTxt() wird concatTxt() aufgerufen und das von concatTxt() zurückgegebene Promise wird zurückgegeben .

Der Event-Handler der zweiten then() -Methode wird ausgeführt, wenn das von concatTxt() Promise erfüllt ist, dh das concatTxt() von zwei Sekunden ist concatTxt(), und resolve() wird mit der verketteten Zeichenfolge als Parameter aufgerufen .

Schließlich fängt catch() alle Ausnahmen und Fehlermeldungen von beiden Promises ab.

In dieser Promisified-Version wird die Zeichenfolge "Hello World" erfolgreich in das Dokument gedruckt .

15 hilfreiche Webdesign-Lektionen, die du von YouTube lernen kannst

Egal, ob Sie ein Profi oder ein Newbie Designer sind, das kontinuierliche Lernen und Perfektionieren Ihrer Fähigkeiten wird Ihnen helfen, ein noch besseres zu werden. Designer zu sein bedeutet mehr als nur Visitenkarten und Website-Vorlagen zu entwerfen, denn Sie müssen mit dem schnell wachsenden Markt Schritt halten und daran arbeiten, Ihre Technik zu beherrschen.&

(Tech- und Design-Tipps)

Eine Einführung in CSS-Scroll-Fangpunkte

Das CSS-Scroll-Snap-Modul ist ein Web-Standard, mit dem wir das Scrollen auf einer Webseite steuern können. So können wir den Nutzer dazu bringen, zu bestimmten Teilen einer Seite zu scrollen und nicht nur irgendwo auf der Seite.Scrollen ist eine der am häufigsten durchgeführten Aktionen auf einer Website. Br

(Tech- und Design-Tipps)