Articles
Einführung in JavaScript
Promise-Klasse in JavaScript

Promise-Klasse in JavaScript

In diesem Artikel erklären wir die Promise-Klasse in JavaScript.

YouTube Video

Promise

Die Promise-Klasse ist eine Klasse zur Handhabung asynchroner Operationen. Sie verarbeitet Ergebnisse, wenn die Operation erfolgreich ist, oder führt Fehlerbehandlungen durch, wenn sie fehlschlägt. Traditionell wurden Callback-Funktionen verwendet, wenn man auf den Abschluss einer asynchronen Operation warten musste, aber Promise macht dies klarer und leistungsfähiger.

1const promise = new Promise((resolve, reject) => {
2    setTimeout(() => resolve("Done!"), 1000);
3});
4
5// Displays "Done!" after 1 second
6promise.then(result => console.log(result));
  • Dieser Code ist ein Beispiel für einen asynchronen Vorgang, der nach einer Sekunde "Fertig!" anzeigt.
    • Zuerst wird ein neues Promise-Objekt mit new Promise erstellt. Das Argument ist eine Funktion, die zwei Callbacks entgegennimmt: resolve für Erfolg und reject für Fehlschlag.
    • setTimeout wird verwendet, um nach einer Sekunde resolve() aufzurufen.
    • Die then()-Methode des Promise-Objekts wartet auf den Abschluss und zeigt das Ergebnis an.

Grundstruktur

Ein Promise ist ein Objekt, das schließlich entweder mit Erfolg oder Fehlschlag endet.

 1const promise = new Promise((resolve, reject) => {
 2    // Asynchronous operation
 3    // Flag indicating whether the operation was successful
 4    const success = true;
 5
 6    if (success) {
 7        resolve('Operation successful!');
 8    } else {
 9        reject('An error occurred');
10    }
11});
  • Im Falle von Erfolg wird resolve() aufgerufen.
  • Im Falle von Fehlschlag wird reject() aufgerufen.

Ein Promise-Objekt hat drei Zustände.

1promise
2    .then((result) => {
3        console.log(result);
4    })
5    .catch((error) => {
6        console.error(error);
7    })
  • Ausstehend
    • Der asynchrone Vorgang ist noch nicht abgeschlossen.
  • Erfüllt
    • Der asynchrone Vorgang war erfolgreich, und das Ergebnis wurde durch resolve() zurückgegeben. Das Ergebnis wird mit der then()-Methode empfangen.
  • Abgelehnt
    • Der asynchrone Vorgang ist fehlgeschlagen, und ein Fehler trat über reject() auf. Der Fehler wird mit der catch()-Methode empfangen.

then()- und catch()-Methoden

Mit einem Promise können Sie definieren, was zu tun ist, wenn eine asynchrone Operation abgeschlossen wird. Dafür verwendet man die Methoden then() und catch().

then() 

1const promise = new Promise((resolve, reject) => {
2    resolve('Operation successful!');
3});
4
5promise.then((result) => {
6    console.log(result);  // "Operation successful!"
7});
  • Die then()-Methode definiert eine Funktion, die aufgerufen wird, wenn das Promise erfolgreich ist.

catch() 

1const promise = new Promise((resolve, reject) => {
2    reject('An error occurred');
3});
4
5promise.catch((error) => {
6    console.error(error);  // "An error occurred"
7});
  • Die catch()-Methode definiert eine Funktion, die aufgerufen wird, wenn das Promise fehlschlägt.

finally()-Methode 

 1const promise = new Promise((resolve, reject) => {
 2    resolve('Operation successful!');
 3});
 4
 5promise
 6    .then((result) => {
 7        console.log(result);
 8    })
 9    .catch((error) => {
10        console.error(error);
11    })
12    .finally(() => {
13        console.log('The operation has completed');
14    });
  • Die finally()-Methode definiert Code, der am Ende ausgeführt wird, unabhängig davon, ob das Promise erfolgreich war oder nicht.

then()-Kette

then() gibt ein neues Promise zurück, sodass Sie das nächste then() verketteln können.

 1const promise = new Promise((resolve, reject) => {
 2    setTimeout(() => {
 3        resolve(1);
 4    }, 1000);
 5});
 6
 7promise
 8    .then(result => {
 9        console.log(result); // 1
10        return result + 1;
11    })
12    .then(result => {
13        console.log(result); // 2
14        return result + 1;
15    })
16    .then(result => {
17        console.log(result); // 3
18    })
19    .catch(error => {
20        console.error(error.message); // Something went wrong
21    });
  • In diesem Code übergibt das anfängliche resolve() den Wert 1, und jeder von einem then zurückgegebene Wert wird an das nächste then weitergegeben.
  • Mit catch() können Sie jeden Fehler, der in der Kette auftritt, an einer Stelle behandeln.

Praktisches Beispiel

Zum Beispiel werden Promises häufig verwendet, um Daten von einem Server abzurufen. Schauen wir uns ein Beispiel mit der fetch()-API an.

 1fetch('https://codesparklab.com/json/example.json')
 2    .then(response => {
 3        if (!response.ok) {
 4            throw new Error('Network error');
 5        }
 6        return response.json();
 7    })
 8    .then(data => {
 9        console.log(data);
10    })
11    .catch(error => {
12        console.error('Error:', error);
13    });
  • In diesem Code wird then() verwendet, um die Daten zu verarbeiten, nachdem die Antwort vom Server eingegangen ist, da fetch() ein Promise zurückgibt. Fehler werden mit catch() behandelt.

Verarbeitung mehrerer Promises

Promise.all()

Um mehrere Promises gleichzeitig auszuführen und nur fortzufahren, wenn alle erfolgreich sind, verwenden Sie Promise.all().

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.resolve(2);
 3const promise3 = Promise.resolve(3);
 4
 5Promise.all([promise1, promise2, promise3])
 6    .then((results) => {
 7        console.log(results);  // [1, 2, 3]
 8    })
 9    .catch((error) => {
10        console.error('Error :', error);
11    });
  • then() wird nur aufgerufen, wenn alle Promises erfolgreich sind. catch() wird aufgerufen, wenn auch nur eines fehlschlägt.

Promise.allSettled()

Wenn Sie mehrere Promises gleichzeitig ausführen und alle Ergebnisse unabhängig von Erfolg oder Misserfolg erhalten möchten, verwenden Sie Promise.allSettled().

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.reject("Failed");
 3const promise3 = Promise.resolve(3);
 4
 5Promise.allSettled([promise1, promise2, promise3])
 6    .then((results) => {
 7        results.forEach(result => console.log(result));
 8        // [
 9        //   { status: 'fulfilled', value: 1 },
10        //   { status: 'rejected', reason: 'Failed' },
11        //   { status: 'fulfilled', value: 3 }
12        // ]
13    });
  • then() wird aufgerufen, sobald alle Promises abgeschlossen sind (entweder erfüllt oder abgelehnt). Jedes Ergebnis enthält eine status-Eigenschaft ('fulfilled' oder 'rejected'). Selbst wenn einige fehlschlagen, beeinflusst das die anderen Operationen nicht.

Promise.race()

Promise.race() gibt das Ergebnis des Promise zurück, das zuerst abgeschlossen wird – egal ob erfüllt oder abgelehnt.

1const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
2const promise2 = new Promise((resolve) => setTimeout(resolve, 500, 'Second'));
3
4Promise.race([promise1, promise2]).then((result) => {
5    console.log(result);  // "First"
6});
  • Wie in diesem Beispiel wird das Ergebnis des zuerst erfüllten Promise zurückgegeben.

Beziehung zu async/await

Mit der Syntax async/await können Sie Promises intuitiver schreiben. Eine async-Funktion gibt immer ein Promise zurück, und await wartet darauf, dass das Promise abgeschlossen wird.

 1async function fetchData() {
 2    try {
 3        const response = await fetch('https://codesparklab.com/json/example.json');
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error('Error :', error);
 8    }
 9}
10
11fetchData();

Durch die Verwendung von async/await können asynchrone Operationen wie synchroner Code geschrieben werden, was die Lesbarkeit verbessert.

Zusammenfassung

  • Promise ist ein Objekt zur Verarbeitung von Erfolg oder Misserfolg asynchroner Operationen.
  • Verarbeiten Sie erfolgreiche Operationen mit then() und Fehler mit catch().
  • finally() definiert Code, der am Ende unabhängig von Erfolg oder Misserfolg ausgeführt wird.
  • Sie können mehrere Promises gemeinsam mit Promise.all() oder Promise.race() verarbeiten.
  • async/await ist eine Syntax, um Promises einfacher zu schreiben.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

`strict mode` in JavaScript