Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Umgang mit Asynchronen Operationen mit Promises | Asynchrones JavaScript und API-Integration
Fortgeschrittene JavaScript-Beherrschung

bookUmgang mit Asynchronen Operationen mit Promises

Was ist ein Promise?

Ein Promise ist ein Platzhalter für einen zukünftigen Wert, der Folgendes sein kann:

Ein Promise beginnt als pending und wird dauerhaft entweder als fulfilled mit einem Wert oder als rejected mit einem Grund abgeschlossen.

Verständnis von resolve-, reject- und then()-Methoden

Erstellen eines Promise

Um ein Promise zu erstellen, wird eine Funktion mit zwei Parametern übergeben: resolve und reject. Diese Parameter sind Funktionen, die anzeigen, ob die asynchrone Operation erfolgreich abgeschlossen wurde oder fehlgeschlagen ist.

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate whether the task is successful

  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});
  • resolve(value): Markiert das Promise als erfüllt (erfolgreich) und übergibt das Ergebnis (value);
  • reject(error): Markiert das Promise als abgelehnt (fehlgeschlagen) und übergibt den Fehler.

Verwendung von then() zur Behandlung erfüllter Promises:

Nachdem ein Promise erstellt wurde, kann das Ergebnis mit der Methode then() verarbeitet werden. Diese Methode wird aufgerufen, wenn das Promise erfüllt (aufgelöst) wurde.

myPromise.then(result => {
  console.log(result); // Output: Task completed successfully!
});

In diesem Beispiel erhält die Methode then() den an resolve() übergebenen Wert und führt den Callback mit dem Ergebnis aus. Sie wird nur ausgeführt, wenn das Promise erfolgreich aufgelöst wurde.

Fehlerbehandlung mit .catch()

Promises bieten eine einfache Möglichkeit zur Fehlerbehandlung über die Methode .catch(). Wenn ein Promise abgelehnt wird (fehlschlägt), wird der Fehler innerhalb von .catch() abgefangen und behandelt.

1234567891011121314151617
const myPromise = new Promise((resolve, reject) => { const success = false; // Simulate a failure if (success) { resolve('Task completed successfully!'); } else { reject('Task failed.'); } }); myPromise .then(result => { console.log(result); }) .catch(error => { console.error('Error:', error); // Output: Error: Task failed. });
copy

catch()-Methode zur Fehlerbehandlung bei abgelehnten Promises. Sie fängt den von reject() übergebenen Fehler ab und ermöglicht die Verwaltung von Fehlerszenarien.

Verkettung von Promises für sequenzielle asynchrone Operationen

Ein wesentlicher Vorteil von Promises ist die Möglichkeit, sie zu verketten. Dadurch können mehrere asynchrone Operationen nacheinander ausgeführt werden, ohne in das sogenannte Callback-Hell zu geraten. Jede then()-Methode gibt ein neues Promise zurück, sodass mehrere then()-Aufrufe in einer Sequenz verkettet werden können. Die Ergebnisse werden im HTML angezeigt, sobald jedes Promise aufgelöst wird.

index.html

index.html

index.js

index.js

index.css

index.css

copy

Sequenzielle Operationen: Jeder then()-Aufruf gibt ein neues Promise zurück und übergibt das Ergebnis von einer Operation zur nächsten. Dies ermöglicht eine saubere, lineare Abfolge asynchroner Operationen, die den angezeigten Text in HTML aktualisieren.

Fehlerbehandlung: Die Methode .catch() behandelt jeden Fehler, der während einer der Promise-Auflösungen auftritt. Dadurch wird sichergestellt, dass Fehler abgefangen und auf der Seite angezeigt werden, unabhängig davon, wo sie in der Kette auftreten.

Warum Promises verwenden?

  1. Vermeidung von Callback-Hell: Promises bieten eine übersichtlichere und besser lesbare Möglichkeit, asynchrone Operationen zu handhaben, als tief verschachtelte Callbacks;
  2. Fehlerbehandlung: Promises verfügen über eine integrierte Fehlerbehandlung mit .catch(), wodurch abgelehnte Operationen einfach behandelt werden können;
  3. Sequenzielles Verketten: Promises ermöglichen das Ausführen mehrerer asynchroner Operationen in Folge durch Verkettung, was den Code leichter nachvollziehbar und wartbar macht.

1. Was ist ein Promise?

2. Was bewirkt .catch() im folgenden Code, wenn in einem der .then()-Callbacks ein Fehler auftritt?

question mark

Was ist ein Promise?

Select the correct answer

question mark

Was bewirkt .catch() im folgenden Code, wenn in einem der .then()-Callbacks ein Fehler auftritt?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.22

bookUmgang mit Asynchronen Operationen mit Promises

Swipe um das Menü anzuzeigen

Was ist ein Promise?

Ein Promise ist ein Platzhalter für einen zukünftigen Wert, der Folgendes sein kann:

Ein Promise beginnt als pending und wird dauerhaft entweder als fulfilled mit einem Wert oder als rejected mit einem Grund abgeschlossen.

Verständnis von resolve-, reject- und then()-Methoden

Erstellen eines Promise

Um ein Promise zu erstellen, wird eine Funktion mit zwei Parametern übergeben: resolve und reject. Diese Parameter sind Funktionen, die anzeigen, ob die asynchrone Operation erfolgreich abgeschlossen wurde oder fehlgeschlagen ist.

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate whether the task is successful

  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});
  • resolve(value): Markiert das Promise als erfüllt (erfolgreich) und übergibt das Ergebnis (value);
  • reject(error): Markiert das Promise als abgelehnt (fehlgeschlagen) und übergibt den Fehler.

Verwendung von then() zur Behandlung erfüllter Promises:

Nachdem ein Promise erstellt wurde, kann das Ergebnis mit der Methode then() verarbeitet werden. Diese Methode wird aufgerufen, wenn das Promise erfüllt (aufgelöst) wurde.

myPromise.then(result => {
  console.log(result); // Output: Task completed successfully!
});

In diesem Beispiel erhält die Methode then() den an resolve() übergebenen Wert und führt den Callback mit dem Ergebnis aus. Sie wird nur ausgeführt, wenn das Promise erfolgreich aufgelöst wurde.

Fehlerbehandlung mit .catch()

Promises bieten eine einfache Möglichkeit zur Fehlerbehandlung über die Methode .catch(). Wenn ein Promise abgelehnt wird (fehlschlägt), wird der Fehler innerhalb von .catch() abgefangen und behandelt.

1234567891011121314151617
const myPromise = new Promise((resolve, reject) => { const success = false; // Simulate a failure if (success) { resolve('Task completed successfully!'); } else { reject('Task failed.'); } }); myPromise .then(result => { console.log(result); }) .catch(error => { console.error('Error:', error); // Output: Error: Task failed. });
copy

catch()-Methode zur Fehlerbehandlung bei abgelehnten Promises. Sie fängt den von reject() übergebenen Fehler ab und ermöglicht die Verwaltung von Fehlerszenarien.

Verkettung von Promises für sequenzielle asynchrone Operationen

Ein wesentlicher Vorteil von Promises ist die Möglichkeit, sie zu verketten. Dadurch können mehrere asynchrone Operationen nacheinander ausgeführt werden, ohne in das sogenannte Callback-Hell zu geraten. Jede then()-Methode gibt ein neues Promise zurück, sodass mehrere then()-Aufrufe in einer Sequenz verkettet werden können. Die Ergebnisse werden im HTML angezeigt, sobald jedes Promise aufgelöst wird.

index.html

index.html

index.js

index.js

index.css

index.css

copy

Sequenzielle Operationen: Jeder then()-Aufruf gibt ein neues Promise zurück und übergibt das Ergebnis von einer Operation zur nächsten. Dies ermöglicht eine saubere, lineare Abfolge asynchroner Operationen, die den angezeigten Text in HTML aktualisieren.

Fehlerbehandlung: Die Methode .catch() behandelt jeden Fehler, der während einer der Promise-Auflösungen auftritt. Dadurch wird sichergestellt, dass Fehler abgefangen und auf der Seite angezeigt werden, unabhängig davon, wo sie in der Kette auftreten.

Warum Promises verwenden?

  1. Vermeidung von Callback-Hell: Promises bieten eine übersichtlichere und besser lesbare Möglichkeit, asynchrone Operationen zu handhaben, als tief verschachtelte Callbacks;
  2. Fehlerbehandlung: Promises verfügen über eine integrierte Fehlerbehandlung mit .catch(), wodurch abgelehnte Operationen einfach behandelt werden können;
  3. Sequenzielles Verketten: Promises ermöglichen das Ausführen mehrerer asynchroner Operationen in Folge durch Verkettung, was den Code leichter nachvollziehbar und wartbar macht.

1. Was ist ein Promise?

2. Was bewirkt .catch() im folgenden Code, wenn in einem der .then()-Callbacks ein Fehler auftritt?

question mark

Was ist ein Promise?

Select the correct answer

question mark

Was bewirkt .catch() im folgenden Code, wenn in einem der .then()-Callbacks ein Fehler auftritt?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 3
some-alt