Share
JavaScript wird durch seine Beliebtheit und die jüngsten Verbesserungen immer mehr zum besten Freund des Web-Programmierers. Und wie alle besten Freunde hält auch JavaScript seine Versprechen.
Das hört sich vielleicht etwas seltsam an, aber es stimmt. Die meisten aktuellen Browser unterstützen das so genannte Promise-Objekt. Ein Versprechen ähnelt einer Funktion insofern, als es einen Code oder eine Aufgabe darstellt, die Sie zu einem späteren Zeitpunkt ausführen möchten.
So sieht ein Versprechen aus.
var myPromise = new Promise (Funktion (Auflösen, Ablehnen) // Die auszuführende Aufgabe geht hierher.);
Sie sehen hier, wenn wir ein Versprechen erstellen, geben wir ihm ein einziges Argument, eine Funktion, die Code enthält, den wir irgendwann in der Zukunft ausführen möchten. Möglicherweise haben Sie auch die beiden Argumente in der an das Versprechen übergebenen Funktion bemerkt, Entschlossenheit und ablehnen. Dies sind auch Funktionen und unsere Art, dem Versprechen zu sagen, ob es das getan hat, was es versprochen hat. So würden Sie sie verwenden:
Accentsconagua
var myPromise = new Promise (Funktion (Auflösen, Ablehnen) if (true) Auflösen ('Hallo Tuts + Fans!'); else Ablehnen ('Aww, hat nicht funktioniert.'););Dieses Versprechen wird offensichtlich immer als gelöst ob Aussage wird immer wahr sein. Dies ist nur zu Lernzwecken - wir werden später etwas realistischeres machen -, aber stellen Sie sich vor, Sie ersetzen das wahr Mit einem Codeausschnitt, von dem Sie nicht überzeugt waren, dass er funktionieren würde.
Nun, da wir ein Versprechen gemacht haben, wie verwenden wir es? Nun, wir müssen dem was sagen Entschlossenheit und ablehnen Funktionen sind. Wir tun dies, indem wir das Versprechen verwenden dann Methode.
myPromise.then (Funktion (Ergebnis) // Rückruf auflösen. console.log (Ergebnis);, Funktion (Ergebnis) // Rückruf ablehnen. Konsole.error (Ergebnis););
Denn unsere if-Anweisung ist immer bestanden wahr Überprüfen Sie, ob der obige Code immer "Hello Tuts + fans!" zur Konsole. Es wird es auch sofort tun. Dies liegt daran, dass der Code in unserem Promise-Konstruktor synchron ist, dh er wartet nicht auf die Ausführung einer Operation. Es verfügt über alle Informationen, die es zum Fortfahren benötigt, und dies so schnell wie möglich.
Wo Versprechen wirklich glänzen, ist es bei asynchronen Aufgaben, bei denen Sie nicht genau wissen, wann genau das Versprechen erfüllt wird. Ein reales Beispiel für eine asynchrone Task ist das Abrufen einer Ressource, beispielsweise einer JSON-Datei, über AJAX. Wir wissen nicht, wie lange der Server für die Antwort braucht, und er kann sogar ausfallen. Fügen wir einige AJAX zu unserem Versprechen-Code hinzu.
var myPromise = new Promise (Funktion (Auflösen, Ablehnen) // Einrichtung und Laden von AJAX-Standardanfragen. var request = new XMLHttpRequest (); // Fordert den Kommentar eines Benutzers in unserem gefälschten Blog an. request.open ('GET', ' http://jsonplaceholder.typicode.com/posts/1 '); // Funktion für Aufruf beim Laden der Ressource festlegen request.onload = function () if (request.status === 200) resol (request). response); else reject ('Seite geladen, aber Status nicht OK.'); // Funktion beim Aufruf der Funktion kann nicht aufgerufen werden. request.onerror = function () reject ('Aww, didn \' t Arbeit an allen. '); request.send (););Der Code hier ist nur Standard-JavaScript zum Durchführen einer AJAX-Anforderung. Wir fordern eine Ressource an, in diesem Fall eine JSON-Datei unter einer angegebenen URL, und warten, bis sie antwortet. Wir wissen nie genau wann. Und wir wollen natürlich nicht die Ausführung eines Skriptes stoppen, um darauf zu warten. Was machen wir also??
Zum Glück haben wir diesen Code in ein Versprechen aufgenommen. Wenn wir es hier angeben, sagen wir im Wesentlichen: "Hey Code, ich muss jetzt gehen, aber ich werde Sie später anrufen und Ihnen sagen, wann er ausgeführt werden soll. Versprechen Sie, dass Sie es tun und mir sagen wenn du fertig bist?" Und der Code wird sagen: "Ja, natürlich. Ich verspreche es."
Eine wichtige Sache, die in dem obigen Code zu beachten ist, ist der Aufruf von Entschlossenheit und ablehnen Funktionen. Denken Sie daran, dass dies unser Weg ist, unser Versprechen zu sagen, dass unser Code erfolgreich ausgeführt wurde oder nicht. Sonst werden wir es nie erfahren.
Anhand des gleichen Codes aus unserem Grundbeispiel können wir sehen, wie unsere AJAX-Anfrage im Versprechen nun funktioniert.
// Sagen Sie unserem Versprechen, seinen Code auszuführen // und sagen Sie uns, wann es fertig ist. myPromise.then (Funktion (Ergebnis) // Druckt empfangene JSON in der Konsole. console.log (Ergebnis);, Funktion (Ergebnis) // Druckt "Aww hat nicht funktioniert" oder // "Seite wurde geladen, aber Status nicht OK. "console.error (Ergebnis););
Ich wusste, dass wir dir vertrauen können, mein Versprechen.
Jetzt denken Sie vielleicht an diesem Punkt, dass Versprechen nur ausgefallene Callback-Funktionen mit einer schöneren Syntax sind. Das ist bis zu einem gewissen Grad wahr, aber um mit unserem AJAX-Beispiel fortzufahren, müssen Sie einige weitere Anforderungen stellen, wobei jede Anfrage auf dem Ergebnis der letzten basiert. Oder wenn Sie den JSON zuerst verarbeiten müssten?
Wenn Sie dies mit Rückrufen tun, würde dies zu einem intensiven Verschachteln von Funktionen führen, von denen jede immer schwieriger zu verfolgen ist. Glücklicherweise können wir in der Welt der Versprechungen solche Funktionen auf diese Weise miteinander verketten. Hier ist ein Beispiel, in dem wir, sobald wir den JSON-Code für einen Benutzerkommentar in unserem gefälschten Blog erhalten haben, sicherstellen möchten, dass alles Kleinbuchstaben ist, bevor Sie etwas anderes tun.
myPromise .then (Funktion (Ergebnis) // Wenn wir JSON erhalten haben, // verwandeln Sie es in ein JSON-Objekt und geben Sie zurück. return JSON.parse (Ergebnis);) .then (Funktion (parsedJSON) // Once json wurden analysiert, // die E-Mail-Adresse abrufen und sie in Kleinbuchstaben schreiben. return parsedJSON.email.toLowerCase ();) .then (function (emailAddress) // Wenn der Text in Kleinbuchstaben geschrieben wurde, // drucken Sie ihn in die Konsole. console.log (emailAddress);, function (err) // Irgendetwas in der obigen Kette ist schief gelaufen? // Ablehnung der Ausgabe. console.error (err););
Sie sehen hier, dass unser ursprünglicher Aufruf zwar asynchron war, es aber auch möglich ist, synchrone Aufrufe zu verketten. Der Code in jedem Entschlossenheit Funktion innerhalb der dann wird aufgerufen, wenn jeder zurückkehrt. Sie werden auch feststellen, dass hier nur eine Fehlerfunktion für die gesamte Kette angegeben ist. Indem Sie diese am Ende der Kette platzieren ablehnen Funktion in der letzten dann, jedes Versprechen in der Kette, die ruft ablehnen werde dieses nennen.
Nun, da wir mit Versprechungen ein bisschen zuversichtlicher sind, erstellen wir in Verbindung mit dem obigen einen weiteren. Wir erstellen eine E-Mail-Adresse, die unsere neue E-Mail-Adresse in Kleinbuchstaben verwendet und eine E-Mail an diese Adresse sendet. Dies ist nur ein Beispiel, um etwas Asynchrones zu veranschaulichen - es könnte alles sein, z. B. die Kontaktaufnahme mit einem Server, um zu sehen, ob die E-Mail auf einer Whitelist stand oder ob der Benutzer angemeldet ist. Wir müssen die E-Mail-Adresse dem neuen Versprechen geben. aber Versprechungen akzeptieren keine Argumente. Um dies zu umgehen, wickeln Sie das Versprechen in eine Funktion ein, die Folgendes tut:
var sendEmail = Funktion (emailAddress) neues Promise zurückgeben (Funktion (Auflösen, Ablehnen) // So tun, als würden Sie eine E-Mail senden // oder etwas anderes asynchron machen) setTimeout (Funktion () Auflösen ('E-Mail gesendet an' + EmailAddress); , 3000);); ;Wir benutzen die setTimeout rufen Sie hier auf, um eine Aufgabe zu simulieren, deren asynchrone Ausführung einige Sekunden dauert.
Wie nutzen wir unsere neue Funktion, die das Versprechen schafft? Nun, seit jedem Entschlossenheit Funktion innerhalb eines dann Sollte eine Funktion zurückgegeben werden, können wir sie auf ähnliche Weise wie unsere synchronen Aufgaben verwenden.
myPromise .then (Funktion (Ergebnis) return JSON.parse (Ergebnis);) .then (Funktion (parsedJSON) return parsedJSON.email.toLowerCase ();) .then (Funktion (emailAddress) return sendEmail (emailAddress) )) .then (Funktion (Ergebnis) // Ausgaben "E-Mail an [email protected] gesendet" console.log (Ergebnis);, function (err) console.error (err););
Gehen wir diesen Fluss durch, um zusammenzufassen, was los ist. Unser ursprüngliches Versprechen mein Versprechen Fordert ein Stück JSON an. Wenn diese JSON empfangen wird (wir wissen nicht wann), wandeln wir die JSON in ein JavaScript-Objekt um und geben diesen Wert zurück.
Sobald dies erledigt ist, nehmen wir die E-Mail-Adresse aus dem JSON und machen sie in Kleinbuchstaben. Dann senden wir eine E-Mail an diese Adresse, und wir wissen nicht, wann sie abgeschlossen werden wird. Wenn dies der Fall ist, wird eine Erfolgsmeldung an die Konsole ausgegeben. Kein schweres Nesting in Sicht.
Ich hoffe, dass dies eine nützliche Einführung in Promises war und Ihnen gute Gründe gegeben hat, sie in Ihren JavaScript-Projekten zu verwenden. Wenn Sie mehr über Versprechungen genauer erfahren möchten, lesen Sie den hervorragenden HTML5 Rocks-Artikel von Jake Archibald zu diesem Thema.
Lernen Sie JavaScript: Das komplette Handbuch
Wir haben ein umfassendes Handbuch zusammengestellt, mit dessen Hilfe Sie JavaScript erlernen können, egal ob Sie gerade erst als Webentwickler anfangen oder sich mit fortgeschrittenen Themen befassen möchten.
