Promises

Geschätzte Lektüre: 7 Minuten 497 Ansichten

Promises sind ein fundamentales Konzept in JavaScript für die Handhabung von asynchronen Operationen. Sie bieten eine elegantere Alternative zu Callbacks und bilden die Grundlage für moderne Async/Await-Syntax.

Was ist ein Promise?

Ein Promise ist ein Objekt, das den eventualen Abschluss (oder Fehlschlag) einer asynchronen Operation repräsentiert und ihren resultierenden Wert zurückgibt.

Ein Promise kann sich in einem von drei Zuständen befinden:

  • Pending: Initialer Zustand, weder erfüllt noch abgelehnt
  • Fulfilled: Die Operation wurde erfolgreich abgeschlossen
  • Rejected: Die Operation ist fehlgeschlagen

Erstellen eines Promises

Ein Promise wird mit dem Promise Konstruktor erstellt, der eine Executor-Funktion als Argument nimmt.

const myPromise = new Promise((resolve, reject) => {
  // Asynchrone Operation
  const success = true; // Simulierte Bedingung
  
  if (success) {
    resolve("Erfolg! Daten wurden geladen.");
  } else {
    reject("Fehler! Daten konnten nicht geladen werden.");
  }
});

Promise Methoden

.then() – Erfolgsfall behandeln

myPromise.then(
  (value) => {
    console.log(value); // "Erfolg! Daten wurden geladen."
  },
  (error) => {
    console.error(error); // Wird bei Ablehnung aufgerufen
  }
);

.catch() – Fehler behandeln

myPromise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.error(error); // Fängt alle Fehler in der Kette
  });

.finally() – Aufräumen

myPromise
  .then((value) => console.log(value))
  .catch((error) => console.error(error))
  .finally(() => {
    console.log("Wird immer ausgeführt, egal ob Erfolg oder Fehler");
  });

Promise Chaining

Promises können verkettet werden, was komplexe asynchrone Abläufe lesbar macht:

function fetchUserData(userId) {
  return fetch(`https://api.example.com/users/${userId}`)
    .then(response => response.json())
    .then(user => {
      return fetch(`https://api.example.com/posts?userId=${user.id}`);
    })
    .then(response => response.json())
    .then(posts => {
      return { user: user, posts: posts };
    })
    .catch(error => {
      console.error("Fehler beim Abrufen der Daten:", error);
      throw error; // Fehler weiterwerfen
    });
}

Statische Promise Methoden

Promise.all() – Mehrere Promises parallel ausführen

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [3, 42, "foo"]
});

Promise.race() – Erster Abschluss gewinnt

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'eins'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'zwei'));

Promise.race([promise1, promise2]).then((value) => {
  console.log(value); // "zwei"
});

Promise.allSettled() – Wartet auf alle, egal ob Erfolg oder Fehler

const promise1 = Promise.resolve(3);
const promise2 = new Promise((_, reject) => setTimeout(reject, 100, 'foo'));

Promise.allSettled([promise1, promise2]).then((results) => {
  results.forEach((result) => console.log(result.status));
  // "fulfilled"
  // "rejected"
});

Promise.any() – Erster Erfolg gewinnt

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'schnell'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'langsam'));

Promise.any([promise1, promise2, promise3]).then((value) => {
  console.log(value); // "schnell"
});

Praxisbeispiel: API-Abfrage mit Fehlerbehandlung

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

// Verwendung
fetchData('https://api.example.com/data')
  .then(data => {
    console.log('Daten erhalten:', data);
    // Weitere Verarbeitung
  })
  .catch(error => {
    console.error('Fehler beim Abrufen der Daten:', error);
    // Fehlerbehandlung
  });

Promises vs. Callbacks

Vorteile von Promises:

  • Bessere Lesbarkeit (keine „Callback-Hölle“)
  • Bessere Fehlerbehandlung mit .catch()
  • Ermöglichen Verkettung von asynchronen Operationen
  • Konsistenteres Fehlerhandling

Promises und Async/Await

Promises bilden die Grundlage für die modernere Async/Await-Syntax:

async function getData() {
  try {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    return { user, posts };
  } catch (error) {
    console.error("Fehler:", error);
    throw error;
  }
}

Wertvolles Werkzeug

Promises sind ein wertvolles Werkzeug in JavaScript für:

  • Handhabung asynchroner Operationen
  • Vermeidung von Callback-Hölle
  • Strukturierte Fehlerbehandlung
  • Komposition mehrerer asynchroner Operationen
  • Grundlage für moderne Async/Await-Syntax

Durch das Verständnis von Promises können Sie asynchronen Code schreiben, der besser lesbar, wartbar und weniger fehleranfällig ist.

Dieses Dokument teilen

Promises

Oder Link kopieren

INHALT

Abonnieren

×
Cancel