Erste Schritte mit JavaScript-Versprechen

Asynchroner Code ist nützlich, um Aufgaben auszuführen, die Zeitaufwendig aber natürlich ist es nicht ohne Nachteile. Async-Code verwendet Callback-Funktionen um seine Ergebnisse zu verarbeiten, jedoch Callback-Funktionen kann keine Werte zurückgeben dass typische JavaScript-Funktionen können.

Somit nehmen sie nicht nur unsere Fähigkeit ab, das zu kontrollieren Ausführung der Funktion aber auch machen Fehlerbehandlung ein bisschen umständlich. Dies ist, wo die Versprechen Objekt kommt ins Spiel, da es einige davon ausfüllen soll Schlaglöcher in asynchroner Kodierung.

Versprechen ist technisch a internes Standardobjekt in JavaScript bedeutet es in JavaScript integriert. Es wird verwendet, um das darzustellen Endergebnis eines asynchronen Codeblocks (oder der Grund, warum der Code fehlgeschlagen ist) und verfügt über Methoden zur Steuerung des Ausführung des asynchronen Codes.

Syntax

Wir können schaffen eine Instanz der Versprechen Objekt Verwendung der Neu Stichwort:

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

Die Funktion als Parameter übergeben zum Versprechen() Konstruktor ist bekannt als Testamentsvollstrecker. Es enthält den asynchronen Code und hat zwei Parameter der Funktion Art, bezeichnet als Entschlossenheit und ablehnen Funktionen (mehr dazu in Kürze).

Staaten der Versprechen Objekt

Das Ausgangszustand von a Versprechen Objekt wird aufgerufen steht aus. In diesem Zustand das Ergebnis der asynchronen Berechnung ist nicht vorhanden.

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

Im Falle der asynchronen Berechnung schlägt fehl, das Versprechen Objekt bewegt sich zum abgelehnt Zustand von seiner ursprünglichen steht aus Zustand. In diesem Zustand ist die Grund des Rechenfehlers (d. h. eine Fehlermeldung) wird zur Verfügung gestellt.

Um von zu gehen steht aus zu erfüllt Zustand, Entschlossenheit() wird genannt. Um von zu gehen steht aus zu abgelehnt Zustand, ablehnen() wird genannt.

Das dann und Fang Methoden

Wenn der Staat wechselt von steht aus zu erfüllt, der Eventhandler der Versprechen Objekt ist dann Methode ausgeführt wird. Und wenn der Staat wechselt von steht aus zu abgelehnt, der Eventhandler der Versprechen Objekt ist Fang Methode ausgeführt wird.

Beispiel 1

“Nicht versprochen” Code

Angenommen, es gibt eine hallo.txt Datei mit der “Hallo” Wort. So schreiben wir eine AJAX-Anfrage Holen Sie sich diese Datei und zeigen Sie den Inhalt, ohne die Versprechen Objekt:

 function getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.Send (); xhr.onload = function () try switch (this.status) Fall 200: document.write (this.response); brechen; Fall 404: "Datei nicht gefunden" werfen; Standard: werfen 'Die Datei konnte nicht abgerufen werden';  catch (err) console.log (err);  getTxt (); 

Wenn der Inhalt der Datei war erfolgreich geholt, d.h.. Der Antwortstatuscode lautet 200, Der Antworttext lautet in das Dokument geschrieben. Wenn die Datei ist nicht gefunden (Status 404), ein “Datei nicht gefunden” Fehlermeldung wird ausgegeben. Ansonsten a allgemeine Fehlermeldung zeigt an, dass das Abrufen der Datei fehlgeschlagen ist.

“Versprochen” Code

Jetzt lass uns Versprich den obigen Code:

 function getTxt () return new Promise (Funktion (Auflösen, Ablehnen)) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) Fall 200: Auflösen (This.Response); Fall 404: Ablehnen ('Datei nicht gefunden'); Standard: Ablehnen ('Fehler bei hol die Datei ab ');;);  getTxt (). then (Funktion (txt) document.write (txt);). catch (function (err) console.log (err);); 

Das getTxt () Funktion ist jetzt in codiert eine neue Instanz von zurückgeben Versprechen Objekt, und seine Executor-Funktion enthält den asynchronen Code von vor.

Wenn der Antwortstatuscode ist 200, das Versprechen ist erfüllt durch Berufung Entschlossenheit() (Die Antwort wird als Parameter von übergeben Entschlossenheit()). Wenn der Statuscode 404 oder ein anderer ist, wird der Versprechen ist abgelehnt mit ablehnen() (mit der entsprechenden Fehlermeldung als Parameter von ablehnen()).

Das Eventhandler für die dann() und Fang() Methoden des Versprechen Objekt sind am Ende hinzugefügt.

Wenn der Versprechen ist erfüllt, der Handler der dann() Methode wird ausgeführt. Ihr Argument ist Der Parameter wurde von übergeben Entschlossenheit(). Innerhalb des Event-Handlers ist der Antworttext (als Argument erhalten) in das Dokument geschrieben.

Wenn der Versprechen ist abgelehnt, der Eventhandler der Fang() Methode wird ausgeführt, Fehler protokollieren.

Das Hauptvorteil Die oben genannte Promisified-Version des Codes ist die Fehlerbehandlung. Anstatt nicht erfasste Ausnahmen - wie in der nicht-versprochenen Version - um die Karte zu werfen entsprechende Fehlermeldungen werden zurückgegeben und protokolliert.

Aber es ist nicht nur das zurückkehren des Fehlermeldungen aber auch von der Ergebnis der asynchronen Berechnung das kann für uns wirklich vorteilhaft sein. Um das zu sehen, müssen wir unser Beispiel erweitern.

Beispiel 2

“Nicht versprochen” Code

Anstatt nur den Text aus anzuzeigen hallo.txt, Ich möchte kombiniere es mit dem “Welt” Wort und zeigen Sie es auf dem Bildschirm an nach einer Auszeit von 2 Sekunden. Hier ist der Code, den ich verwende:

 function getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.Send (); xhr.onload = function () try switch (this.status) case 200: document.write (concatTxt (this.response)); brechen; Fall 404: "Datei nicht gefunden" werfen; Standard: werfen 'Die Datei konnte nicht abgerufen werden';  catch (err) console.log (err);  function concatTxt (res) setTimeout (function () return (res + 'World'), 2000);  getTxt (); 

Auf dem Statuscode 200 wird der concatTxt () Funktion wird angerufen verketten Sie den Antworttext mit der “Welt” Wort bevor Sie es in ein Dokument schreiben.

Aber dieser Code funktioniert nicht wie gewünscht. Das setTimeout () Rückruffunktion Die verkettete Zeichenfolge kann nicht zurückgegeben werden. Was im Dokument ausgedruckt wird, ist nicht definiert denn das ist Was concatTxt () kehrt zurück.

“Versprochen” Code

Damit der Code funktioniert, lassen Sie uns Versprich den obigen Code, einschließlich concatTxt ():

 function getTxt () return new Promise (Funktion (Auflösen, Ablehnen)) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) Fall 200: Auflösen (This.Response); Fall 404: Ablehnen ('Datei nicht gefunden'); Standard: Ablehnen ('Fehler bei hol die Datei ab ');;);  function concatTxt (txt) return new Promise (Funktion (Auflösen, Ablehnen) setTimeout (function () Auflösen (txt + 'World');, 2000););  getTxt (). dann ((txt) => return concatTxt (txt);). dann ((txt) => document.write (txt);). catch ((err) => console. log (err);); 

So wie getTxt (), das concatTxt () Funktion auch gibt ein neues zurück Versprechen Objekt anstelle des verketteten Textes. Das Versprechen zurückgegeben von concatTxt () ist In Callback-Funktion von gelöst setTimeout ().

Am Ende des obigen Codes der Ereignishandler des ersten Codes dann() Methode läuft, wenn die Versprechen von getTxt () ist erfüllt, wenn die Datei ist erfolgreich abgeholt. In diesem Handler, concatTxt () wird genannt und das Versprechen zurückgegeben von concatTxt () ist zurück gekommen.

Der Eventhandler des zweiten dann() Methode läuft, wenn die Versprechen zurückgegeben von concatTxt () ist erfüllt, das zwei Sekunden Timeout ist vorbei und Entschlossenheit() wird genannt mit der verketteten Zeichenfolge als Parameter.

Endlich, Fang() fängt alle Ausnahmen und Fehlermeldungen ab von beiden Versprechen.

In dieser Versprechenden Version wird der “Hallo Welt” String wird sein erfolgreich ausgedruckt zum Dokument.