Einführung

JavaScript ist eine Single-Threaded-Programmiersprache, was bedeutet, dass es jeweils nur eine Aufgabe ausführen kann. Schwierig wird dies bei asynchronen Vorgängen wie dem Abrufen von Daten oder dem Festlegen von Timern, die den Ausführungsfluss blockieren und Ihre App verlangsamen können.

Um diese asynchronen Aufgaben zu bewältigen, ohne den Thread einzufrieren, stoßen wir auf Promise – ein leistungsstarkes Tool, das die asynchrone Programmierung vereinfacht. Mit Promises können Sie lang laufende Aufgaben effektiver verwalten, saubereren, besser lesbaren Code schreiben und die gefürchtete „Callback-Hölle vermeiden.“

In diesem Artikel möchte ich Sie damit vertraut machen, was Promises sind, wie sie funktionieren und wie sie die asynchrone Programmierung vereinfachen.

Was ist ein Versprechen?

Stellen Sie sich vor, Sie bestellen eine Mahlzeit in einem Restaurant. Sobald Sie Ihre Bestellung aufgegeben haben, müssen Sie nicht mehr an der Küche warten, bis Ihr Essen zubereitet wird. Stattdessen können Sie Ihrem Gespräch nachgehen oder die Atmosphäre genießen, während die Küche im Hintergrund Ihr Essen zubereitet. Das Restaurant verspricht, Ihnen das Essen zu servieren, sobald es fertig ist. Sie können diesem Versprechen vertrauen, denn irgendwann wird eines von zwei Dingen passieren: Entweder kommt Ihr Essen an (erfüllt) oder die Küche teilt Ihnen mit, dass die Bestellung nicht ausgeführt werden kann (abgelehnt). ).

In JavaScript funktionieren Promises auf ähnliche Weise. Wenn Sie JavaScript bitten, etwas zu tun, das Zeit braucht – etwa Daten von einem Server abzurufen –, gibt es ein Promise zurück. Dieses Versprechen liefert Ihnen nicht sofort das Ergebnis. Stattdessen wird Ihnen gesagt: „Ich melde mich bei Ihnen, wenn die Arbeit erledigt ist.“ Während dieser Zeit wird der Rest Ihres Codes weiter ausgeführt. Sobald die Aufgabe abgeschlossen ist, lautet das Versprechen entweder:

• Erfüllt (die Aufgabe war erfolgreich), oder
• Abgelehnt (die Aufgabe ist fehlgeschlagen), und Sie können das Ergebnis entsprechend behandeln.

Wie Promises in JavaScript funktionieren

Ein Versprechen stellt einen Wert dar, der jetzt, in der Zukunft oder nie verfügbar sein kann. Es hat drei Zustände:

• Ausstehend: Die Aufgabe ist noch in Bearbeitung und das endgültige Ergebnis (erfüllt oder abgelehnt) steht noch nicht fest.
• Erfüllt: Die Aufgabe wurde erfolgreich abgeschlossen und das Ergebnis ist verfügbar.
• Abgelehnt: Die Aufgabe ist fehlgeschlagen und es liegt ein Fehler zur Bearbeitung vor

1. Ein Versprechen schaffen

Um ein Promise zu erstellen, verwenden Sie den Konstruktor Promise, der eine Funktion (bekannt als Executor) mit zwei Parametern annimmt: Auflösung und Ablehnung. Die Auflösungsfunktion wird aufgerufen, wenn das Versprechen erfüllt ist, während die Ablehnungsfunktion aufgerufen wird, wenn es abgelehnt wird.

const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});

2. Versprechen lösen und ablehnen

Sobald ein Versprechen erstellt wurde, können Sie über das Ergebnis entscheiden, indem Sie entweder „resolve“ oder „reject“ aufrufen:

• Auflösung (Wert): Rufen Sie diese Funktion auf, wenn der asynchrone Vorgang erfolgreich abgeschlossen wurde. Es übergibt einen Wert an die Handler, die auf die Erfüllung des Versprechens warten.
• Reject(error): Rufen Sie diese Funktion auf, wenn der Vorgang fehlschlägt. Es gibt eine Fehlermeldung an die Handler weiter, die auf die Ablehnung des Versprechens warten.

3. Versprechen konsumieren

Sobald Sie ein Versprechen erstellt haben, besteht der nächste Schritt darin, es zu nutzen. JavaScript bietet mehrere Methoden zur Verarbeitung der Ergebnisse von Promises: .then(), .catch() und .finally(). Jede dieser Methoden dient einem bestimmten Zweck und ermöglicht Ihnen die effektive Verwaltung der Ergebnisse asynchroner Vorgänge.

• Umgang mit aufgelösten Versprechen mit .then(): Die Methode .then() wird verwendet, um anzugeben, was passieren soll, wenn ein Versprechen erfüllt wird. Es benötigt zwei optionale Argumente: einen Rückruf für den aufgelösten Wert und einen weiteren für die Behandlung von Ablehnungen.

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
};

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  });

• Umgang mit Ablehnungen mit .catch(): Die .catch()-Methode wurde speziell für die Behandlung von Fehlern entwickelt, die während der Ausführung des Promise auftreten. Dies macht es zu einem sauberen Weg, mit Ablehnungen umzugehen.

const fetchWithError = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Error fetching data."); // Simulating an error
    }, 1000);
  });
};

fetchWithError()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error); // Logs: Error fetching data.
  });

• Abschluss- oder Bereinigungsaktionen mit .finally(): Mit der Methode .finally() können Sie Code ausführen, nachdem das Versprechen erfüllt wurde, unabhängig davon, ob es erfüllt oder abgelehnt wurde. Dies ist nützlich für Bereinigungsaktionen oder -aufgaben, die sowohl in Erfolgs- als auch in Fehlerszenarien ausgeführt werden sollen.

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  })
  .catch(error => {
    console.error(error); // Handle error
  })
  .finally(() => {
    console.log("Promise has settled."); // Logs after either success or failure
  });

Um es kurz zu machen:

• then(): Verwenden Sie diese Methode, um den aufgelösten Wert eines Versprechens zu verarbeiten.
• Catch(): Verwenden Sie diese Methode, um Fehler zu behandeln, wenn ein Versprechen abgelehnt wird.
• „final()“: Diese Methode führt Code aus, nachdem das Versprechen erfüllt wurde, unabhängig vom Ergebnis, und ermöglicht so Aufräumarbeiten oder abschließende Aktionen.

4. Verkettung von Versprechen

Eine der leistungsstärksten Funktionen von Promises ist ihre Fähigkeit, miteinander verkettet zu werden, sodass Sie mehrere asynchrone Vorgänge nacheinander ausführen können. Das bedeutet, dass jede Operation vor der Ausführung auf den Abschluss der vorherigen wartet, was besonders nützlich ist, wenn Aufgaben voneinander abhängig sind.

Sehen wir uns das folgende Beispiel an:

const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ userId: 1, username: "JohnDoe" });
    }, 1000);
  });
};

const fetchPosts = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["Post 1", "Post 2", "Post 3"]); // Simulated posts
    }, 1000);
  });
};

// Chaining Promises
fetchUserData()
  .then(user => {
    console.log("User fetched:", user);
    return fetchPosts(user.userId); // Pass userId to the next promise
  })
  .then(posts => {
    console.log("Posts fetched:", posts);
  })
  .catch(error => {
    console.error("Error:", error);
  });

In diesem Beispiel gibt die Funktion fetchUserData ein Promise zurück, das mit Benutzerinformationen aufgelöst wird. Der aufgelöste Wert wird dann an die fetchPosts-Funktion übergeben, die ein weiteres Promise zurückgibt. Wenn eines dieser Versprechen abgelehnt wird, wird der Fehler in der letzten .catch()-Methode abgefangen, was eine effektive Fehlerbehandlung in der gesamten Kette ermöglicht.

Abschluss

Zusammenfassend lässt sich sagen, dass Promises ein entscheidender Bestandteil des modernen JavaScript sind und es Entwicklern ermöglichen, asynchrone Vorgänge strukturierter und effizienter abzuwickeln. Durch die Verwendung von Promises können Sie:

• Vereinfachen Sie die Verwaltung asynchroner Aufgaben und vermeiden Sie die Callback-Hölle.
• Verketten Sie mehrere asynchrone Vorgänge, um einen klaren Ausführungsfluss aufrechtzuerhalten.
• Fehler effektiv mit einem einheitlichen Ansatz behandeln.

Wenn Sie Promises in Ihren eigenen Projekten implementieren, werden Sie feststellen, dass sie nicht nur die Lesbarkeit des Codes verbessern, sondern auch das allgemeine Benutzererlebnis verbessern, indem sie dafür sorgen, dass Ihre Anwendungen reaktionsfähig bleiben. Ich hoffe, dass diese Reise durch die grundlegenden Konzepte von JavaScript den Entwicklern wertvolle Erkenntnisse geliefert hat. Viel Spaß beim Codieren!