Warten auf die Auflösung von promise in JavaScript

1. Was sind Promises in JavaScript?
2. Phasen der Promises in JavaScript
3. Implementieren von Promises mit den Schlüsselwörtern async und await in JavaScript

In der Version ECMA Script (ES6) wurden die meisten modernen Funktionen der Programmiersprache JavaScript eingeführt. Die Funktionen dieser Sprache, eine der prominentesten und am weitesten verbreiteten Funktionen von JavaScript, genannt Promises, wurden ebenfalls in dieser Version eingeführt.

Wie wir wissen, ist die JavaScript-Sprache eine Singlethread-Sprache, was bedeutet, dass nur eine Aufgabe und in einer bestimmten Reihenfolge ausgeführt werden kann. In einigen Fällen kann dies zu Problemen führen.

Wenn Sie beispielsweise eine setTimeout()-Funktion verwendet haben, die nach drei Sekunden ausgeführt wird, wartet der JavaScript-Compiler keine 3 Sekunden. Wie unten gezeigt, beginnt es einfach mit der Ausführung des nächsten Teils des Codes.

function abc() {
  console.log('a');
  setTimeout(() => {
    console.log('b');
  }, 3000)
  console.log('c');
}
abc();

Ausgabe:

a
c
b

Hier muss b vor c gedruckt worden sein, aber das ist nicht der Fall. Um dies zu überwinden, wurden die Versprechungen in JavaScript eingeführt, was uns bei der Durchführung einer asynchronen Aufgabe hilft.

Mal sehen, wie Promises funktionieren und warten, bis Promises im Hintergrund aufgelöst werden. Außerdem werden die meisten Konzepte, die wir in diesem Artikel lernen werden, von der JavaScript ES6-Version und höher unterstützt und funktionieren möglicherweise nicht in älteren Browsern wie IE.

Was sind Promises in JavaScript?

Wann immer wir eine Anfrage wie eine Datenbankanfrage oder eine API-Anfrage ausführen, kann es eine Weile dauern, bis die Daten vom Server zurückerhalten werden. Wir können nicht sagen, wie viel Zeit solche Vorgänge in der Produktion in Anspruch nehmen können, wenn viele Anforderungen gleichzeitig ausgeführt werden.

Promises in JavaScript ermöglichen es uns, auf den Abschluss solcher Operationen oder Aufgaben zu warten, und je nachdem, ob die Aufgabe erfüllt ist, können wir weitere Maßnahmen ergreifen.

Wir müssen ein Klassenobjekt Promise mit dem Schlüsselwort new erstellen, um Promises zu verwenden. Promise braucht zwei Argumente, auflösen und ablehnen.

Die Methode resolve() gibt ein Promise-Objekt zurück, das mit einem Wert aufgelöst wird. Wenn beim Ausführen eines Promise ein Fehler auftritt, gibt die Ablehnungsmethode einen Fehler zurück.

Promises verwenden die Schlüsselwörter async und await. Diese Keywords sind wichtig und notwendig bei der Umsetzung von Versprechen.

Wir werden später in diesem Artikel mehr über sie erfahren.

Phasen der Promises in JavaScript

Eine Analogie zu Promises könnte sein, sagen Sie, Sie und Ihr Freund versprechen sich gegenseitig, dass Sie beide am Sonntag zusammen einen Film ansehen werden. Und gehen Sie davon aus, dass es Freitag ist und das Versprechen heute gegeben wird.

Da der Sonntag noch nicht gekommen ist, können wir technisch sagen, dass das Versprechen ansteht. Wenn Sie Ihren Freund am Sonntag treffen, ist das Versprechen erfüllt, und wenn Sie Ihr Versprechen brechen, indem Sie den Film nicht ansehen, wird das Versprechen abgelehnt.

Promises in JavaScript werden in 3 Stufen ausgeführt und sind wie folgt.

• Ausstehend: Wenn ein Versprechen ausgeführt wird, befindet es sich in der ausstehenden Phase.
• Erfüllt: Wenn ein Promise seine Ausführung erfolgreich abgeschlossen hat, wird es aufgelöst und gibt den Wert der durchgeführten Operation zurück. Hier soll sich das Versprechen im erfüllten Stadium befinden.
• Abgelehnt: Wenn das Promise während seiner Ausführung fehlschlägt, wird es abgelehnt und gibt eine Fehlermeldung zurück. Hier soll sich das Versprechen in der abgelehnten Phase befinden.

Implementieren von Promises mit den Schlüsselwörtern async und await in JavaScript

Die Schlüsselwörter async und await gehen bei der Umsetzung von Promises Hand in Hand.

Das Schlüsselwort async kann mit einer Funktion verwendet werden, deren Ausführung Ihrer Meinung nach einige Zeit in Anspruch nehmen kann. Dadurch funktionieren sie asynchron.

Dieses Schlüsselwort teilt der JavaScript-Engine mit, dass die Ausführung eines Teils des Codes innerhalb dieser Funktion einige Zeit in Anspruch nehmen kann und Sie warten müssen, bis die Ausführung abgeschlossen ist.

Wir müssen angeben, welcher Teil des Codes innerhalb dieser Funktion einige Zeit zur Ausführung benötigen könnte. Hier verwenden wir das Schlüsselwort await.

Wo immer Sie also ein await-Schlüsselwort innerhalb dieser Funktion verwenden, wartet die JavaScript-Engine, bis dieser Teil vollständig ausgeführt ist. Wenn die Ausführung erfolgreich ist, wird das erfüllte Promise zurückgegeben oder das Promise abgelehnt.

Das folgende Beispiel veranschaulicht dies.

Hier haben wir eine Funktion namens myPromise. Wir haben innerhalb dieser Funktion ein Versprechen erstellt, das entweder gelöst oder abgelehnt wurde.

Die Aufgabe dieser Funktion besteht darin, die JSON-Daten von der API abzurufen. Da wir Daten von der API anfordern, kann die Ausführung des Promise einige Zeit dauern, daher haben wir await verwendet, um auf die Auflösung des Promise zu warten.

Da wir await verwenden, bevor wir ein Promise zurückgeben, müssen wir die myPromise-Funktion als async einstellen.

Die von uns verwendete API ist eine kostenlose API von der JSONPlaceholder-Website. Mit dieser API werden wir die Beitragsdaten abrufen.

Wir können die Funktion fetch() verwenden, um die Daten von dieser API abzurufen. Nachdem diese Funktion die Daten abgerufen hat, müssen wir mit der Funktion then() angeben, was wir als nächstes tun möchten.

Wir geben die Daten von der fetch()-Funktion einfach als Parameter an die then()-Funktion zurück. Der Name des Parameters kann beliebig sein, und wir haben als Parameternamen response angegeben.

Schließlich geben wir die Auflösung des Versprechens zurück, indem wir das Ergebnis mit der Funktion response.json() in das JSON-Format konvertieren.

async function myPromise() {
  return await new Promise((resolve, reject) => {
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          resolve(response.json());
        })
        .catch(error => {
          reject(error);
        });
  })
}

Wenn beim Abrufen der Daten von der API ein Fehler auftritt, wird dies von der Funktion catch() behandelt. Diese Funktion gibt den Fehler mit Hilfe der Funktion reject() zurück.

Nachdem das Promise aufgelöst wurde, können Sie als nächstes mit den Daten, die es mit Hilfe der Funktion then() zurückgibt, machen, was Sie wollen. Sie können mehrere then()-Funktionen haben, die in einer Sequenz nacheinander ausgeführt werden.

Und wenn Sie Fehler abfangen möchten, können Sie die Funktion catch() verwenden.

myPromise().then(result => {
  result.forEach(element => {
    var heading = document.createElement('h2');
    heading.innerHTML = element.title;
    document.body.appendChild(heading);
  });
});

Ausgabe:

Nachdem die Funktion myPromise() ein aufgelöstes Versprechen zurückgibt, verwenden wir die Funktion then(), um den Titel der Posts abzurufen und im HTML-Dokument anzuzeigen.

Hier haben wir ein Überschriften-Tag h2 erstellt und hängen die Titel, die in den Ergebnisdaten enthalten sind, die wir von der Posts-API erhalten haben, an den Body des HTML-Dokuments an.