JavaScript-Tutorial: Promises verstehen und einsetzen

• maPromesse ist die Variable, die das Promise-Objekt enthält.
• resolve und reject sind Funktionen, die der Konstruktor Promise bereitstellt.
• Der Code innerhalb der Funktion beschreibt die Aktion der Promise.
• Gelingt die Aktion, rufst du resolve mit einer Erfolgsmeldung auf (optional).
• Scheitert sie, rufst du reject mit einer Fehlermeldung auf (optional).

Mit einer Promise arbeiten

Das Ergebnis einer Promise behandelst du mit den Methoden .then() und .catch():

maPromesse
 .then((message) => {
    console.log("Succès:", message);
  })
  .catch((erreur) => {
    console.log("Erreur:", erreur);
  });

• .then() läuft, wenn die Promise erfüllt wird. Die Erfolgsmeldung kommt als Argument an.
• .catch() läuft, wenn die Promise abgelehnt wird. Die Fehlermeldung kommt als Argument an.

Anwendungsfälle

Promises sind praktisch für asynchrone Operationen, etwa den Download eines Bildes von einem Server. Statt den Code bis zum Ende des Downloads zu blockieren, erlaubt dir die Promise, andere Dinge zu erledigen und das Ergebnis zu behandeln, sobald es vorliegt.

Callbacks ersetzen

Promises sind die lesbarere Alternative zu verschachtelten Callbacks. Hier ein Beispiel dafür, wie du eine Funktion mit Callbacks in eine Funktion mit Promise umbaust:

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Code der Funktion ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

function watchTutorialPromise(erreur = false) {
  return new Promise((resolve, reject) => {
    // ... Code der Funktion ...
    if (erreur) {
      reject("Message d'erreur");
    } else {
      resolve("Message de succès");
    }
  });
}

.then() und .catch() machen den Code klarer und ersparen dir die „Callback-Hölle“.

Fortgeschrittene Methoden

• Promise.all(): Führt mehrere Promises parallel aus und gibt ein Array mit den Ergebnissen zurück, sobald alle erfüllt sind.
• Promise.race(): Führt mehrere Promises parallel aus und gibt das Ergebnis der ersten Promise zurück, die erfüllt oder abgelehnt wird.

Fazit

Promises sind ein mächtiges Werkzeug für asynchrone Operationen in JavaScript. Mit ihnen schreibst du lesbareren Code und umgehst die Probleme verschachtelter Callbacks. Sieh dir ruhig die Beispiele aus dem Video an und übe damit, bis dir dieses zentrale Konzept in Fleisch und Blut übergeht.

Promises in JavaScript wirken auf den ersten Blick kompliziert, sind aber einfacher, als sie aussehen. Dieses Tutorial folgt dem Video „JavaScript Promises In 10 Minutes“ von Web Dev Simplified und führt dich durch die wichtigsten Konzepte und die Syntax der Promises.

Grundkonzept

Eine Promise in JavaScript funktioniert wie ein Versprechen im echten Leben. Du sagst zu, etwas zu tun, und dieses Versprechen kann zwei Ausgänge haben:

• Erfüllt (resolved): Das Versprechen wurde eingelöst.
• Abgelehnt (rejected): Das Versprechen konnte nicht eingelöst werden.
•  

Syntax

Eine Promise legst du mit dem Konstruktor Promise an:

const succes = true; // durch Ihre eigene Bedingung ersetzen

let maPromesse = new Promise((resolve, reject) => {
  // Code, der das Versprechen einlöst
  if (succes) {
    resolve("Message de succès");
  } else {
    reject("Message d'échec");
  }
});

In diesem Beispiel gilt:

• maPromesse ist die Variable, die das Promise-Objekt enthält.
• resolve und reject sind Funktionen, die der Konstruktor Promise bereitstellt.
• Der Code innerhalb der Funktion beschreibt die Aktion der Promise.
• Gelingt die Aktion, rufst du resolve mit einer Erfolgsmeldung auf (optional).
• Scheitert sie, rufst du reject mit einer Fehlermeldung auf (optional).

Mit einer Promise arbeiten

Das Ergebnis einer Promise behandelst du mit den Methoden .then() und .catch():

maPromesse
 .then((message) => {
    console.log("Succès:", message);
  })
  .catch((erreur) => {
    console.log("Erreur:", erreur);
  });

• .then() läuft, wenn die Promise erfüllt wird. Die Erfolgsmeldung kommt als Argument an.
• .catch() läuft, wenn die Promise abgelehnt wird. Die Fehlermeldung kommt als Argument an.

Anwendungsfälle

Promises sind praktisch für asynchrone Operationen, etwa den Download eines Bildes von einem Server. Statt den Code bis zum Ende des Downloads zu blockieren, erlaubt dir die Promise, andere Dinge zu erledigen und das Ergebnis zu behandeln, sobald es vorliegt.

Callbacks ersetzen

Promises sind die lesbarere Alternative zu verschachtelten Callbacks. Hier ein Beispiel dafür, wie du eine Funktion mit Callbacks in eine Funktion mit Promise umbaust:

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Code der Funktion ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

function watchTutorialPromise(erreur = false) {
  return new Promise((resolve, reject) => {
    // ... Code der Funktion ...
    if (erreur) {
      reject("Message d'erreur");
    } else {
      resolve("Message de succès");
    }
  });
}

.then() und .catch() machen den Code klarer und ersparen dir die „Callback-Hölle“.

Fortgeschrittene Methoden

• Promise.all(): Führt mehrere Promises parallel aus und gibt ein Array mit den Ergebnissen zurück, sobald alle erfüllt sind.
• Promise.race(): Führt mehrere Promises parallel aus und gibt das Ergebnis der ersten Promise zurück, die erfüllt oder abgelehnt wird.

Fazit

Promises sind ein mächtiges Werkzeug für asynchrone Operationen in JavaScript. Mit ihnen schreibst du lesbareren Code und umgehst die Probleme verschachtelter Callbacks. Sieh dir ruhig die Beispiele aus dem Video an und übe damit, bis dir dieses zentrale Konzept in Fleisch und Blut übergeht.