JavaScript Promise Tutorial: Auflösen, Ablehnen und Verketten in JS und ES6

Versprechen sind eine der Möglichkeiten, wie wir mit asynchronen Operationen in JavaScript umgehen können. Viele Menschen haben Schwierigkeiten zu verstehen, wie Versprechen funktionieren. Deshalb werde ich in diesem Beitrag versuchen, sie so einfach wie möglich zu erklären.

Versprechen sind ein weites Thema, daher kann ich in diesem Artikel nicht auf jedes Detail eingehen. Sie finden jedoch eine allgemeine Einführung in das, was Versprechen sind, Erklärungen zu Begriffen wie Auflösen, Ablehnen und Verketten sowie ein Codebeispiel zum Erstellen und Verwenden von Versprechen.

Voraussetzung: Um diesen Artikel besser zu verstehen, lesen Sie meinen anderen Beitrag über JavaScript-Rückrufe.

Was ist ein Versprechen?

Ein Versprechen in JavaScript ähnelt einem Versprechen im wirklichen Leben. Wenn wir im wirklichen Leben ein Versprechen geben, ist dies eine Garantie dafür, dass wir in Zukunft etwas tun werden. Weil Versprechen nur für die Zukunft gemacht werden können.

Ein Versprechen hat zwei mögliche Ergebnisse: Es wird entweder zu gegebener Zeit eingehalten oder nicht.

Dies gilt auch für Versprechen in JavaScript. Wenn wir ein Versprechen in JavaScript definieren, wird es zu gegebener Zeit aufgelöst oder abgelehnt.

Versprechen in JavaScript

Zuallererst ist ein Versprechen ein Objekt. Es gibt 3 Zustände des Promise-Objekts:

  • Ausstehend: Anfangszustand, bevor das Versprechen erfolgreich ist oder fehlschlägt
  • Gelöst: Versprechen abgeschlossen
  • Abgelehnt: Fehlgeschlagenes Versprechen

Wenn wir beispielsweise mithilfe eines Versprechens Daten vom Server anfordern, befinden sich diese im ausstehenden Modus, bis wir unsere Daten erhalten.

Wenn wir die Informationen vom Server erhalten, wird das Versprechen erfolgreich gelöst. Wenn wir die Informationen jedoch nicht erhalten, befindet sich das Versprechen im abgelehnten Zustand.

Wenn mehrere Anforderungen vorliegen, wird nach dem Auflösen (oder Ablehnen) des ersten Versprechens ein neuer Prozess gestartet, an den wir es direkt mit einer Methode namens Verketten anhängen können.

Wenn Sie möchten, können Sie auch die folgende Videoversion ansehen:

Was ist der Unterschied zwischen Rückrufen und Versprechen?

Der Hauptunterschied zwischen Rückruffunktionen und Versprechungen besteht darin, dass wir einen Rückruf an ein Versprechen anhängen, anstatt ihn weiterzuleiten. Daher verwenden wir Rückruffunktionen immer noch mit Versprechungen, jedoch auf andere Weise (Verkettung).

Dies ist einer der größten Vorteile von Promises, aber warum?

Was ist Verkettung?

Rückruffunktionen werden seit vielen Jahren allein für asynchrone Operationen in JavaScript verwendet. In einigen Fällen kann die Verwendung von Versprechungen jedoch eine bessere Option sein.

Wenn mehrere asynchrone Vorgänge ausgeführt werden müssen und wir versuchen, gute alte Rückrufe für sie zu verwenden, befinden wir uns schnell in einer Situation namens Rückrufhölle:

firstRequest(function(response) { secondRequest(response, function(nextResponse) { thirdRequest(nextResponse, function(finalResponse) { console.log('Final response: ' + finalResponse); }, failureCallback); }, failureCallback); }, failureCallback);

Wenn wir jedoch mit Promises denselben Vorgang ausführen, da wir Rückrufe anhängen können, anstatt sie zu übergeben, sieht der oben genannte Code diesmal viel sauberer und leichter zu lesen aus:

firstRequest() .then(function(response) { return secondRequest(response); }).then(function(nextResponse) { return thirdRequest(nextResponse); }).then(function(finalResponse) { console.log('Final response: ' + finalResponse); }).catch(failureCallback);

Der obige Code zeigt, wie mehrere Rückrufe nacheinander verkettet werden können. Verkettung ist eines der besten Merkmale von Promises.

Schritt für Schritt ein Versprechen erstellen und verwenden

Zunächst verwenden wir einen Konstruktor, um ein Promise-Objekt zu erstellen:

const myPromise = new Promise();

Es werden zwei Parameter benötigt, einer für den Erfolg (Auflösung) und einer für den Fehler (Ablehnung):

const myPromise = new Promise((resolve, reject) => { // condition });

Schließlich wird es eine Bedingung geben. Wenn die Bedingung erfüllt ist, wird das Versprechen aufgelöst, andernfalls wird es abgelehnt:

const myPromise = new Promise((resolve, reject) => { let condition; if(condition is met) { resolve('Promise is resolved successfully.'); } else { reject('Promise is rejected'); } });

Also haben wir unser erstes Versprechen erstellt. Jetzt lass es uns benutzen.

dann () für gelöste Versprechen:

Wenn Sie das Bild am Anfang dieses Beitrags erneut besuchen, werden Sie feststellen, dass es zwei Fälle gibt: einen für gelöste Versprechen und einen für abgelehnte. Wenn das Versprechen gelöst wird (Erfolgsfall), passiert als nächstes etwas (hängt davon ab, was wir mit dem erfolgreichen Versprechen machen).

myPromise.then();

Die then () -Methode wird aufgerufen, nachdem das Versprechen aufgelöst wurde. Dann können wir entscheiden, was mit dem aufgelösten Versprechen geschehen soll.

Lassen Sie uns zum Beispiel die Nachricht in der Konsole protokollieren, die wir vom Versprechen erhalten haben:

myPromise.then((message) => { console.log(message); });

catch () für abgelehnte Versprechen:

Die then () -Methode gilt jedoch nur für aufgelöste Versprechen. Was ist, wenn das Versprechen fehlschlägt? Dann müssen wir die catch () -Methode verwenden.

Ebenso fügen wir die then () -Methode hinzu. Wir können die catch () -Methode auch direkt nach then () direkt anhängen:

myPromise.then((message) => { console.log(message); }).catch((message) => { console.log(message); });

Wenn das Versprechen abgelehnt wird, springt es zur catch () -Methode und dieses Mal wird eine andere Meldung auf der Konsole angezeigt.

Einpacken

Auf diese Weise erstellen wir ein Versprechen in JavaScript und verwenden es für gelöste und abgelehnte Fälle. Versprechen sind ein breiteres Thema, und es gibt noch viel mehr zu lernen. Es braucht also Zeit, um zu verstehen, wie sie funktionieren.

Dieser Beitrag ist nur eine Einführung in Promises. Ich hoffe, Sie fanden ihn hilfreich, um eine Vorstellung davon zu bekommen, was JavaScript-Promises sind und wie sie verwendet werden.

Wenn Sie mehr über Webentwicklung erfahren möchten, besuchen Sie meinen Youtube-Kanal, um weitere Informationen zu erhalten.

Thank you for reading!