Versprechen in JavaScript verwenden

Von Zeit zu Zeit veröffentlichen wir Materialien, die sich auf die eine oder andere Weise auf die Verwendung von Versprechungen in JavaScript beziehen.


Warum wird so viel Aufmerksamkeit auf Versprechen gelenkt? Wir glauben, dass der springende Punkt ist, dass diese Technologie sehr gefragt ist und dass es ziemlich schwer zu verstehen ist.

Wenn Sie die Versprechen besser verstehen möchten, bieten wir Ihnen daher eine Übersetzung des nächsten Artikels zu diesem Thema an. Sein Autor sagt, dass er Java und PHP in den letzten 10 Jahren entwickelt hat, aber die ganze Zeit hat er sich mit Interesse für JavaScript interessiert. Vor kurzem beschloss er, sich ernsthaft mit JS zu beschäftigen, und Versprechen wurden das erste Thema, das ihn interessierte.



Wir glauben, dass dieses Material für unerfahrene Entwickler interessant sein wird, die das Gefühl haben, dass sie, obwohl sie Versprechen verwenden, diese nicht gut genug verstehen. Es ist möglich, dass die Geschichte von jemandem, der JavaScript mit einem frischen Blick betrachtet und anderen erklären möchte, was er selbst verstanden hat, ohne zu glauben, dass einige Dinge für alle verständlich sind und ohne Erklärung, Anfängern hilft, JavaScript-Mechanismen zu beherrschen.

JavaScript mit den Augen eines Anfängers

Jeder, der anfängt, in JavaScript zu schreiben, kann fühlen, was als "fehl am Platz" bezeichnet wird. Einige sagen, dass JS eine synchrone Programmiersprache ist, andere sagen, dass es asynchron ist. Ein Neuling erfährt von Code, der den Hauptthread blockiert, und von Code, der ihn nicht blockiert, von ereignisbasierten Entwurfsmustern, vom Lebenszyklus von Ereignissen, vom Stapel von Funktionsaufrufen, von der Warteschlange von Ereignissen und deren Aufstieg, von Polyfills. Er erfährt, dass es solche Dinge wie Babel, Angular, React, Vue und eine Vielzahl anderer Bibliotheken gibt. Wenn Sie sich gerade in einem solchen „Anfänger“ wiedererkannt haben - machen Sie sich darüber keine Sorgen. Du bist weder der Erste noch der Letzte. Dafür gibt es sogar einen Begriff - die sogenannte „JavaScript-Müdigkeit“. Lucas F. Costa sprach treffend zu diesem Thema: " JavaScript-Müdigkeit kann beobachtet werden, wenn Benutzer Tools verwenden, die sie nicht benötigen, um Probleme zu lösen, die sie nicht haben ."

Aber reden wir nicht über traurige Dinge. JavaScript ist also eine synchrone Programmiersprache, mit der Sie dank des Rückrufmechanismus Funktionen auf die gleiche Weise wie in asynchronen Sprachen aufrufen können.

Eine einfache Geschichte über Versprechen

Das Wort Versprechen bedeutet Versprechen. Versprechen Objekte in der Programmierung, die wir "Versprechen" nennen, sind den üblichen Versprechen, die sich Menschen im wirklichen Leben gegenseitig geben, sehr ähnlich. Sprechen wir also zuerst über diese Versprechen.

Auf Wikipedia finden Sie die folgende Definition des Wortes „Versprechen“: „Verpflichtung, Zustimmung von jemandem, etwas zu erfüllen oder im Gegenteil nicht zu tun“. In Ozhegovs Wörterbuch ist "Versprechen" "eine freiwillige Verpflichtung, etwas zu tun".

Was wissen wir über Versprechen?

1. Ein Versprechen gibt Ihnen die Garantie, dass etwas getan wird. Es spielt keine Rolle, wer genau dies tut: derjenige, der das Versprechen gegeben hat, oder jemand anderes auf Anfrage desjenigen, der das Versprechen gegeben hat. Ein Versprechen gibt Vertrauen in etwas, basierend auf diesem Vertrauen kann derjenige, der das Versprechen erhalten hat, zum Beispiel einige Pläne machen.
2. Ein Versprechen kann entweder erfüllt werden oder nicht.
3. Wenn das Versprechen erfüllt ist, erwarten Sie daher etwas, das Sie in Zukunft verwenden können, um Maßnahmen durchzuführen oder Pläne umzusetzen.
4. Wenn das Versprechen nicht erfüllt wird, möchten Sie herausfinden, warum derjenige, der es gegeben hat, es nicht erfüllen konnte. Nachdem Sie den Grund für das Geschehene herausgefunden haben und sicher sind, dass das Versprechen nicht erfüllt wurde, können Sie überlegen, was als Nächstes zu tun ist oder wie Sie mit der Situation umgehen sollen.
5. Nachdem Ihnen etwas versprochen wurde, haben Sie nur eine Art Garantie. Sie können das, was Ihnen versprochen wird, nicht sofort nutzen. Sie können selbst bestimmen, was Sie tun müssen, wenn das Versprechen erfüllt ist (daher erhalten Sie das Versprechen), und was Sie tun müssen, wenn es sich als fehlerhaft herausstellt (in diesem Fall kennen Sie den Grund für das, was passiert ist, und können daher über einen Sicherungsplan nachdenken )
6. Es ist wahrscheinlich, dass die Person, die das Versprechen gegeben hat, einfach verschwindet. In solchen Fällen ist es nützlich, dass das Versprechen an einen bestimmten Zeitrahmen gebunden ist. Wenn beispielsweise derjenige, der Ihnen das Versprechen gegeben hat, nicht innerhalb von 10 Tagen erscheint, können Sie davon ausgehen, dass er einige Probleme hatte und das Versprechen gebrochen hat. Selbst wenn derjenige, der das Versprechen abgegeben hat, es in 15 Tagen erfüllt, spielt dies keine Rolle. Sie handeln also bereits nach dem alternativen Plan und verlassen sich nicht auf das Versprechen.

Fahren Sie nun mit JavaScript fort.

JavaScript verspricht

Ich habe eine Regel: Wenn ich JavaScript mache, lese ich immer die Dokumentation , die auf MDN zu finden ist. Es scheint mir, dass diese Ressource in Bezug auf Spezifität und Klarheit der Darstellung im Vergleich zu den anderen günstig ist. Während ich Versprechen studierte, machte ich mich daher mit dem relevanten Material vertraut und experimentierte mit dem Code, um mich an die neuen Syntaxkonstrukte zu gewöhnen.

Um die Versprechen zu verstehen, müssen Sie sich mit zwei Hauptsachen befassen. Das erste ist die Schaffung von Versprechungen. Die zweite ist die Verarbeitung der von den Versprechungen zurückgegebenen Ergebnisse. Obwohl der größte Teil des Codes, den wir schreiben, darauf abzielt, mit Versprechungen zu arbeiten, die beispielsweise von bestimmten Bibliotheken erstellt wurden, wird ein umfassendes Verständnis der Mechanismen der Arbeit von Versprechungen zweifellos nützlich sein. Für einen Programmierer, der bereits Erfahrung hat, ist es ebenso wichtig zu wissen, wie man Versprechen erstellt, wie zu wissen, wie man mit ihnen arbeitet.

Versprechen erstellen

So entstehen Versprechen:

new Promise( /* executor */ function(resolve, reject) { ... } ); 

Der Konstruktor akzeptiert eine Funktion, die bestimmte Aktionen ausführt. Wir haben sie hier executor . Diese Funktion benötigt zwei Parameter - resolve und reject , die wiederum ebenfalls Funktionen sind. Versprechungen werden normalerweise verwendet, um asynchrone Vorgänge oder Code auszuführen, der den Hauptthread blockieren kann, z. B. einen, der mit Dateien arbeitet, API-Aufrufe ausführt, Datenbankabfragen durchführt, sich mit E / A befasst und so weiter. Der Start solcher asynchroner Operationen wird in der executor Funktion ausgeführt. Wenn der asynchrone Vorgang erfolgreich abgeschlossen wurde, wird das vom Versprechen erwartete Ergebnis durch Aufrufen der resolve . Die Situation, in der diese Funktion aufgerufen wird, wird vom Schöpfer des Versprechens bestimmt. Wenn ein Fehler auftritt, werden Informationen über das Geschehene durch Aufrufen der reject .

Jetzt, da wir allgemein wissen, wie man Versprechen schafft, werden wir ein einfaches Versprechen erstellen, um alles besser zu verstehen.

 var keepsHisWord; keepsHisWord = true; promise1 = new Promise(function(resolve, reject) { if (keepsHisWord) {   resolve("The man likes to keep his word"); } else {   reject("The man doesnt want to keep his word"); } }); console.log(promise1); 

Dieser Code gibt Folgendes aus:


Promise hat einen Status (PromiseStatus) und einen Wert (PromiseValue)

Da unser Versprechen sofort gelöst wird, können wir seinen Ausgangszustand nicht untersuchen. Lassen Sie uns daher ein neues Versprechen erstellen, das zur Lösung einige Zeit benötigt. Der einfachste Weg, dies zu tun, ist die Verwendung der Funktion setTimeout .

 promise2 = new Promise(function(resolve, reject) { setTimeout(function() {   resolve({     message: "The man likes to keep his word",     code: "aManKeepsHisWord"   }); }, 10 * 1000); }); console.log(promise2); 

In diesem Code wird ein Versprechen erstellt, das sich mit Sicherheit in 10 Sekunden auflöst. Dies gibt uns die Möglichkeit, den Zustand eines nicht autorisierten Versprechens zu betrachten.


Ungelöstes Versprechen

Nach Ablauf von 10 Sekunden wird das Versprechen gelöst. Infolgedessen werden sowohl PromiseStatus als auch PromiseValue entsprechend aktualisiert. Wie Sie sehen können, haben wir in diesem Beispiel die Funktion geändert, die aufgerufen wurde, als das Versprechen erfolgreich aufgelöst wurde. Jetzt wird keine gewöhnliche Zeichenfolge, sondern ein Objekt zurückgegeben. Dies geschieht, um die Fähigkeit zu demonstrieren, komplexe Datenstrukturen mithilfe der resolve .


Das Versprechen wurde nach 10 Sekunden gelöst und ein Objekt zurückgegeben

Schauen wir uns nun das Versprechen an, das wir nicht zulassen, sondern ablehnen wollten. Dazu ändern wir den Code, der bereits im ersten Beispiel verwendet wurde.

 keepsHisWord = false; promise3 = new Promise(function(resolve, reject) { if (keepsHisWord) {   resolve("The man likes to keep his word"); } else {   reject("The man doesn't want to keep his word"); } }); console.log(promise3); 

Da wir die Situation der Ablehnung des Versprechens nicht behandeln, wird in der Browserkonsole eine Fehlermeldung angezeigt (hier wird Google Chrome verwendet). Wir werden weiter unten mehr darüber sprechen.


Abgelehntes Versprechen

Nachdem wir alle drei Beispiele analysiert haben, können wir sehen, dass in PromiseStatus drei verschiedene Werte PromiseStatus : pending (ausstehend), resolved (erfolgreiche Auflösung) und rejected (abgelehnt). Wenn ein Versprechen erstellt wird, PromiseStatus in PromiseStatus pending und in PromiseValue undefined . Diese Werte bleiben bestehen, bis das Versprechen gelöst oder abgelehnt wird. Wenn sich ein Versprechen in einem resolved oder rejected Zustand befindet, wird es als festgelegtes Versprechen bezeichnet. Ein solches Versprechen ist von einem Wartezustand in einen Zustand übergegangen, in dem es entweder einen resolved Zustand oder einen rejected Zustand hat.

Nachdem wir gelernt haben, wie Versprechen erstellt werden, können wir darüber sprechen, wie wir verarbeiten können, was sie zurückgeben. Um dies herauszufinden, müssen wir die Struktur des Promise Objekts verstehen.

Versprechen Objekt

Gemäß der MDN-Dokumentation ist ein Promise Objekt das Ergebnis eines erfolgreichen oder erfolglosen Abschlusses einer asynchronen Operation.

Das Promise Objekt verfügt über statische Methoden und Prototypmethoden des Objekts. Statische Methoden können aufgerufen werden, ohne eine Instanz des Objekts zu erstellen. Um die Prototypmethoden aufzurufen, benötigen Sie eine Instanz des Promise Objekts. Beachten Sie, dass sowohl statische als auch reguläre Methoden Promise Objekte zurückgeben. Dies erleichtert die Arbeit.

▍ Versprechen Sie Methoden für Objektprototypen

Lassen Sie uns zunächst über die Prototypmethoden des Promise Objekts sprechen. Es gibt drei solche Methoden. Vergessen Sie nicht, dass diese Methoden für die Promise Objektinstanz aufgerufen werden können und dass sie selbst die Versprechen zurückgeben. Dank all dieser Methoden können Sie Handler zuweisen, die auf Änderungen im Status von Versprechungen reagieren. Wie wir bereits gesehen haben, befindet sich ein Versprechen, wenn es erstellt wird, in einem pending Zustand. Wenn ein Versprechen in einen resolved oder rejected Zustand rejected , wird mindestens eine der folgenden Methoden aufgerufen:

 Promise.prototype.catch(onRejected) Promise.prototype.then(onFulfilled, onRejected) Promise.prototype.finally(onFinally) 

Unten sehen Sie ein Diagramm der Funktionsweise des Versprechens und der Ereignisse, die zum Aufruf der .catch .then und .catch . Da diese Methoden Promise Objekte zurückgeben, können ihre Aufrufe verkettet werden. Dies spiegelt sich auch im Diagramm wider. Wenn das Versprechen die .finally Methode verwendet, wird es aufgerufen, wenn das Versprechen in den festgelegten Zustand versetzt wird, unabhängig davon, ob das Versprechen erfolgreich gelöst oder abgelehnt wurde.


Promis-Arbeitsschema (Bild von hier )

Hier ist eine kurze Geschichte. Sie sind Student und bitten Ihre Mutter, Ihnen ein Handy zu kaufen. Sie sagt: "Wenn unsere Ersparnisse mehr sind als die Kosten des Telefons, werde ich es für Sie kaufen." Erzählen Sie diese Geschichte jetzt in JavaScript nach.

 var momsPromise = new Promise(function(resolve, reject) { momsSavings = 20000; priceOfPhone = 60000; if (momsSavings > priceOfPhone) {   resolve({     brand: "iphone",     model: "6s"   }); } else {   reject("We donot have enough savings. Let us save some more money."); } }); momsPromise.then(function(value) { console.log("Hurray I got this phone as a gift ", JSON.stringify(value)); }); momsPromise.catch(function(reason) { console.log("Mom coudn't buy me the phone because ", reason); }); momsPromise.finally(function() { console.log(   "Irrespecitve of whether my mom can buy me a phone or not, I still love her" ); }); 

Dieser Code gibt Folgendes aus:


Mama hat kein Versprechen gehalten

Wenn wir den Wert der Variablen momsSavings auf 200.000 momsSavings , kann Mutter ein Geschenk für ihren Sohn kaufen. In diesem Fall gibt der obige Code Folgendes aus.


Mama hat ein Versprechen gehalten

Stellen wir uns nun vor, dass der betreffende Code als Bibliothek konzipiert ist und wir diese Bibliothek verwenden. Lassen Sie uns über die effektive Verwendung der .catch .then und .catch .

Da der .then Methode sowohl der onFulfilled Handler .then werden kann, der onFulfilled wird, wenn das Versprechen erfolgreich aufgelöst wurde, als auch der onRejected Handler, der aufgerufen wird, wenn das Versprechen abgelehnt wird, anstatt sowohl die .then Methode als auch die .catch Methode zu verwenden, können wir denselben Effekt mit nur einem erzielen .then Methode. So könnte es aussehen:

 momsPromise.then( function(value) {   console.log("Hurray I got this phone as a gift ", JSON.stringify(value)); }, function(reason) {   console.log("Mom coudn't buy me the phone because ", reason); } ); 

Dies ist ein funktionierendes Beispiel, aber um die Lesbarkeit des Codes zu verhindern, ist es besser, die Methoden .then und .catch anstelle einer universellen .then .

Damit diese Beispiele in einem Browser und speziell in Google Chrome ausgeführt werden können, habe ich versucht, externe Abhängigkeiten zu vermeiden. Um besser zu verstehen, was wir später betrachten werden, erstellen wir eine Funktion, die ein Versprechen zurückgibt, dessen Auflösung oder Ablehnung zufällig erfolgt. Auf diese Weise können wir verschiedene Szenarien der Arbeit mit Versprechungen erleben. Um die Merkmale asynchroner Funktionen zu verstehen, werden wir in unseren Versprechungen zufällige Verzögerungen festlegen. Da wir Zufallszahlen benötigen, erstellen wir eine Funktion, die eine Zufallszahl zwischen x und y zurückgibt. Hier ist die Funktion.

 function getRandomNumber(start = 1, end = 10) { //,      start  end >=1  end > start return parseInt(Math.random() * end) % (end-start+1) + start; } 

Erstellen Sie nun eine Funktion, die Versprechen zurückgibt. promiseTRRARNOSG es promiseTRRARNOSG . Der Name dieser Funktion steht für promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator , promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator es handelt sich um einen Generator von Versprechungen, die nach einer zufälligen Anzahl von Sekunden zufällig aufgelöst oder abgelehnt werden. Diese Funktion erstellt ein Versprechen, das nach einer zufälligen Zeitspanne zwischen 2 und 10 Sekunden zugelassen oder abgelehnt wird. Um ein Versprechen zufällig zuzulassen oder abzulehnen, erhalten wir eine Zufallszahl zwischen 1 und 10. Wenn diese Zahl mehr als 5 beträgt, wird das Versprechen zugelassen, andernfalls wird es abgelehnt.

 function getRandomNumber(start = 1, end = 10) { //,      start  end >=1  end > start return (parseInt(Math.random() * end) % (end - start + 1)) + start; } var promiseTRRARNOSG = (promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator = function() { return new Promise(function(resolve, reject) {   let randomNumberOfSeconds = getRandomNumber(2, 10);   setTimeout(function() {     let randomiseResolving = getRandomNumber(1, 10);     if (randomiseResolving > 5) {       resolve({         randomNumberOfSeconds: randomNumberOfSeconds,         randomiseResolving: randomiseResolving       });     } else {       reject({         randomNumberOfSeconds: randomNumberOfSeconds,         randomiseResolving: randomiseResolving       });     }   }, randomNumberOfSeconds * 1000); }); }); var testProimse = promiseTRRARNOSG(); testProimse.then(function(value) { console.log("Value when promise is resolved : ", value); }); testProimse.catch(function(reason) { console.log("Reason when promise is rejected : ", reason); }); //             ,    .     ,  - . for (i=1; i<=10; i++) { let promise = promiseTRRARNOSG(); promise.then(function(value) {   console.log("Value when promise is resolved : ", value); }); promise.catch(function(reason) {   console.log("Reason when promise is rejected : ", reason); }); } 

Führen Sie diesen Code in der Browserkonsole aus, um zu sehen, wie sich zulässige und abgelehnte Versprechen verhalten. Als nächstes werden wir darüber sprechen, wie Sie viele Versprechen erstellen und die Ergebnisse ihrer Implementierung mithilfe anderer Mechanismen überprüfen können.

▍Statische Methoden eines Promise-Objekts

Es gibt vier statische Methoden für ein Promise Objekt.

Hier sind zwei Methoden - Promise.reject(reason) und Promise.resolve(value) , mit denen Sie abgelehnte bzw. zulässige Versprechen erstellen können.

Hier Promise.reject , wie Sie mit der Promise.reject Methode arbeiten, mit der abgelehnte Versprechen erstellt werden.

 var promise3 = Promise.reject("Not interested"); promise3.then(function(value){ console.log("This will not run as it is a rejected promise. The resolved value is ", value); }); promise3.catch(function(reason){ console.log("This run as it is a rejected promise. The reason is ", reason); }); 

Hier ist ein Beispiel mit der Promise.resolve Methode, mit der erfolgreich aufgelöste Versprechen erstellt werden.

 var promise4 = Promise.resolve(1); promise4.then(function(value){ console.log("This will run as it is a resovled promise. The resolved value is ", value); }); promise4.catch(function(reason){ console.log("This will not run as it is a resolved promise", reason); }); 

Es sollte beachtet werden, dass ein Versprechen mehrere Handler haben kann. Basierend auf dem vorherigen Beispiel können Sie beispielsweise den unten gezeigten Code erhalten.

 var promise4 = Promise.resolve(1); promise4.then(function(value){ console.log("This will run as it is a resovled promise. The resolved value is ", value); }); promise4.then(function(value){ console.log("This will also run as multiple handlers can be added. Printing twice the resolved value which is ", value * 2); }); promise4.catch(function(reason){ console.log("This will not run as it is a resolved promise", reason); }); 

Folgendes wird in der Browserkonsole angezeigt:


Verwenden Sie mehrere .then, wenn Sie mit Promise arbeiten

Die folgenden beiden Methoden, Promise.all und Promise.race , funktionieren mit Versprechungen. Wenn zur Lösung eines bestimmten Problems mehrere Versprechen verarbeitet werden müssen, ist es am bequemsten, diese Versprechen in einem Array zu platzieren und dann die erforderlichen Aktionen mit ihnen auszuführen. Um das Wesentliche der hier betrachteten Methoden zu verstehen, können wir unsere praktische Funktion promiseTRRARNOSG , da das Ergebnis seiner Arbeit zu stark vom Willen des Einzelfalls abhängt. Es wird für uns bequemer sein, etwas zu verwenden, das vorhersehbarere Versprechen hervorbringt, die es uns ermöglichen, ihr Verhalten zu verstehen. Daher werden wir zwei neue Funktionen erstellen. Einer von ihnen ( promiseTRSANSG ) erstellt Versprechen, die nach n Sekunden aufgelöst werden, der zweite ( promiseTRJANSG ) - Versprechen, die nach n Sekunden abgelehnt werden.

 var promiseTRSANSG = (promiseThatResolvesAfterNSecondsGenerator = function( n = 0 ) { return new Promise(function(resolve, reject) {   setTimeout(function() {     resolve({       resolvedAfterNSeconds: n     });   }, n * 1000); }); }); var promiseTRJANSG = (promiseThatRejectsAfterNSecondsGenerator = function( n = 0 ) { return new Promise(function(resolve, reject) {   setTimeout(function() {     reject({       rejectedAfterNSeconds: n     });   }, n * 1000); }); }); 

Jetzt werden wir diese Funktionen verwenden, um die Funktionen der Promise.all Methode zu verstehen.

▍ Methode Promise.all

In der MDN-Dokumentation können Sie feststellen, dass die Methode Promise.all(iterable) ein Versprechen zurückgibt, das aufgelöst wird, wenn alle als iterable Argument übergebenen Versprechen iterable werden oder wenn dieses Argument keine Versprechen enthält. Dieses Versprechen wird abgelehnt, wenn eines der übertragenen Versprechen abgelehnt wird.
Schauen wir uns einige Beispiele an.

Beispiel Nr. 1

Alle Versprechen werden hier erlaubt sein. Dieses Szenario ist am häufigsten.

 console.time("Promise.All"); var promisesArray = []; promisesArray.push(promiseTRSANSG(1)); promisesArray.push(promiseTRSANSG(4)); promisesArray.push(promiseTRSANSG(2)); var handleAllPromises = Promise.all(promisesArray); handleAllPromises.then(function(values) { console.timeEnd("Promise.All"); console.log("All the promises are resolved", values); }); handleAllPromises.catch(function(reason) { console.log("One of the promises failed with the following reason", reason); }); 

Dieser Code gibt Folgendes an die Konsole aus:


Alle Versprechen erlaubt

Nach der Analyse der Ergebnisse dieses Beispiels können zwei wichtige Beobachtungen gemacht werden.

Erstens wird das dritte Versprechen, dessen Auflösung 2 Sekunden dauert, vor dem zweiten abgeschlossen, aber wie aus der vom Code erzeugten Ausgabe hervorgeht, bleibt die Reihenfolge der Versprechen im Array erhalten.

Zweitens enthält der Code einen Timer, mit dem ermittelt wird, wie lange es dauert, die Anweisung Promise.all auszuführen.

Wenn Versprechen nacheinander ausgeführt würden, würde die Ausführungszeit dieser Anweisung 7 Sekunden betragen (1 + 4 + 2). Der Timer teilt uns jedoch mit, dass der gesamte Vorgang 4 Sekunden gedauert hat, wenn wir das Ergebnis gerundet haben. Dies ist ein Beweis dafür, dass alle Versprechen parallel ausgeführt werden.

Beispiel Nr. 2

Betrachten Sie nun die Situation, in der das an Promise.all übergebene Array keine Versprechen enthält. Ich glaube, dies ist der am wenigsten verbreitete Anwendungsfall für diese Funktion.

 console.time("Promise.All"); var promisesArray = []; promisesArray.push(1); promisesArray.push(4); promisesArray.push(2); var handleAllPromises = Promise.all(promisesArray); handleAllPromises.then(function(values) { console.timeEnd("Promise.All"); console.log("All the promises are resolved", values); }); handleAllPromises.catch(function(reason) { console.log("One of the promises failed with the following reason", reason); }); 

Hier ist die Ausgabe, die dieser Code generiert:


Rufen Sie Promise.all auf und übergeben Sie ein Array, das keine Versprechen enthält, an diese Methode

Da das Array keine Versprechen enthält, wird Promise.all fast sofort aufgelöst.

Beispiel Nr. 3

Schauen wir uns nun an, was passiert, wenn eines der an Promise.all Versprechen abgelehnt wird.

 console.time("Promise.All"); var promisesArray = []; promisesArray.push(promiseTRSANSG(1)); promisesArray.push(promiseTRSANSG(5)); promisesArray.push(promiseTRSANSG(3)); promisesArray.push(promiseTRJANSG(2)); promisesArray.push(promiseTRSANSG(4)); var handleAllPromises = Promise.all(promisesArray); handleAllPromises.then(function(values) { console.timeEnd("Promise.All"); console.log("All the promises are resolved", values); }); handleAllPromises.catch(function(reason) { console.timeEnd("Promise.All"); console.log("One of the promises failed with the following reason ", reason); }); 

Wie Sie den unten gezeigten Ergebnissen der Codeausführung entnehmen können, Promise.all Ausführung von Promise.all nach dem ersten abgelehnten Versprechen mit der Ausgabe der Nachricht, die dieses Versprechen gibt.


Die Ausführung stoppt nach dem ersten abgelehnten Versprechen

▍ Promise.race-Methode

MDN meldet, dass die Promise.race(iterable) Methode Promise.race(iterable) ein zulässiges oder abgelehntes Versprechen mit einem Wert oder Grund für die Ablehnung zurückgibt, nachdem eines der übertragenen Versprechen zulässig bzw. abgelehnt wurde.

Promise.race wir Promise.race Beispiele für die Arbeit mit Promise.race .

Beispiel Nr. 1

Es zeigt, was passiert, wenn eines der an Promise.race Versprechen vor allen anderen gelöst wird.

 console.time("Promise.race"); var promisesArray = []; promisesArray.push(promiseTRSANSG(4)); promisesArray.push(promiseTRSANSG(3)); promisesArray.push(promiseTRSANSG(2)); promisesArray.push(promiseTRJANSG(3)); promisesArray.push(promiseTRSANSG(4)); var promisesRace = Promise.race(promisesArray); promisesRace.then(function(values) { console.timeEnd("Promise.race"); console.log("The fasted promise resolved", values); }); promisesRace.catch(function(reason) { console.timeEnd("Promise.race"); console.log("The fastest promise rejected with the following reason ", reason); }); 

Dies gelangt nach Ausführung dieses Beispiels zur Konsole.


Promis, das sich schneller auflöste als alle anderen

Alle Versprechen werden hier parallel ausgeführt. Das dritte Versprechen ist nach 2 Sekunden gelöst. Sobald dies geschieht, wird das von Promise.race Versprechen aufgelöst.

Beispiel Nr. 2

Betrachten Sie nun die Situation, in der eines der an Promise.race Versprechen abgelehnt wird.

 console.time("Promise.race"); var promisesArray = []; promisesArray.push(promiseTRSANSG(4)); promisesArray.push(promiseTRSANSG(6)); promisesArray.push(promiseTRSANSG(5)); promisesArray.push(promiseTRJANSG(3)); promisesArray.push(promiseTRSANSG(4)); var promisesRace = Promise.race(promisesArray); promisesRace.then(function(values) { console.timeEnd("Promise.race"); console.log("The fasted promise resolved", values); }); promisesRace.catch(function(reason) { console.timeEnd("Promise.race"); console.log("The fastest promise rejected with the following reason ", reason); }); 

Nach dem Ausführen dieses Beispiels gelangt Folgendes zur Konsole:


Versprechen vor allen anderen abgelehnt

Versprechen werden hier wie in den vorherigen Beispielen parallel ausgeführt. Das vierte Versprechen wird nach 3 Sekunden abgelehnt. Sobald dies geschieht, wird das von Promise.race zurückgegebene Versprechen abgelehnt.

Allgemeines Beispiel und Experimente

Ich habe alle Beispiele, die wir in diesem Material betrachtet haben, an einem Ort gesammelt, um es einfacher zu machen, mit ihnen zu experimentieren und verschiedene Szenarien für die Arbeit mit Versprechungen zu untersuchen. Dieser Code kann in einem Browser ausgeführt werden. Daher verwenden wir hier keine API-Aufrufe, greifen nicht auf Dateivorgänge zu und arbeiten nicht mit Datenbanken. Obwohl all dies in der Entwicklung realer Projekte Anwendung findet, glaube ich, dass die Arbeit mit diesen Mechanismen uns von unserem Hauptziel - den Versprechen - ablenken kann. Die Verwendung einfacher Funktionen, die Zeitverzögerungen simulieren, führt zu ähnlichen Ergebnissen und belastet uns nicht mit zusätzlichen Details.

Indem Sie diese Beispiele selbst untersuchen, können Sie mit dem Code und den Werten der Variablen experimentieren und verschiedene Szenarien für die Verwendung von Versprechungen untersuchen. Insbesondere können Sie eine Kombination aus den promiseTRJANSG promiseTRSANSG promiseTRJANSG , promiseTRSANSG und promiseTRRARNOSG verwenden, um viele Szenarien für die Verwendung von Versprechungen zu simulieren, mit denen Sie sie besser verstehen können. Beachten Sie außerdem, dass Sie mit dem Befehl console.time die Zeit ermitteln können, die zum Ausführen eines bestimmten Codeteils erforderlich ist, und beispielsweise herausfinden können, ob Versprechen parallel oder nacheinander ausgeführt werden. Hier ist ein Link zur Hauptseite mit dem Code. Übrigens, wenn Sie möchten, schauen Sie sich die Bluebird- Bibliothek an, die einige interessante Methoden für die Arbeit mit Versprechungen enthält.

Zusammenfassung

Ich biete Ihnen eine Liste von Regeln an, die ich bei der Arbeit mit Versprechungen einhalte, um sie richtig anzuwenden.

1. Verwenden Sie Versprechen in Situationen, in denen Sie mit asynchronem oder blockierendem Code arbeiten.
2. Verwenden Sie die Methode .then um die Situation einer erfolgreichen Lösung eines Versprechens zu bewältigen. Verwenden .then Fällen, in denen das Versprechen abgelehnt wird, .catch .
3. Verwenden .then in allen Versprechungen die .catch .then und .catch .
4. - , , .finally .
5. , , , .
6. , .
7. Promise , , , .
8. Promise.all , .

, , , .

Liebe Leser! , , ?