Was sind Promises in JavaScript?

Ein Promise ist ein Objekt in JavaScript, das eine asynchrone Operation repräsentiert, die in der Zukunft abgeschlossen werden kann. Es ist wie ein Versprechen: „Ich verspreche, dir das Ergebnis zu liefern, sobald die Aufgabe abgeschlossen ist“. Ein Promise kann sich in einem der folgenden drei Zustände befinden:

• Pending (ausstehend): Der anfängliche Zustand, weder erfüllt noch abgelehnt.
• Fulfilled (erfüllt): Die Operation wurde erfolgreich abgeschlossen.
• Rejected (abgelehnt): Die Operation ist fehlgeschlagen.

Warum Promises verwenden?

Bevor es Promises gab, wurden Callbacks verwendet, um Asynchronität zu handhaben. Die Verschachtelung vieler Callbacks führte jedoch zur „Callback Hell“, die den Code schwer lesbar und wartbar machte. Promises lösen dieses Problem, indem sie eine klare und lineare Schreibweise bieten, die die Verwaltung asynchroner Aufgaben und die Fehlerbehandlung vereinfacht.

Promises in JavaScript verwenden

Einen Promise erstellen

Um einen Promise zu erstellen, verwenden Sie new Promise und übergeben eine Executor-Funktion mit zwei Parametern: resolve und reject. resolve wird aufgerufen, wenn der Promise erfolgreich erfüllt wird, reject wird aufgerufen, wenn der Promise abgelehnt wird.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('Erfolg!');
    } else {
      reject('Fehler!');
    }
  }, 1000);
});

In diesem Beispiel wird der Promise nach einer Sekunde entweder mit dem Ergebnis „Erfolg!“ erfüllt oder mit „Fehler!“ abgelehnt.

Ergebnisse mit .then() und .catch() verarbeiten

Um das Ergebnis eines Promise zu erhalten, können Sie die Methoden .then() und .catch() verwenden. .then(onFulfilled) wird aufgerufen, wenn der Promise erfüllt wird, .catch(onRejected) wird aufgerufen, wenn der Promise abgelehnt wird.

promise
  .then((result) => {
    console.log(result); // "Erfolg!"
  })
  .catch((error) => {
    console.error(error); // "Fehler!"
  });

Promises verketten

Sie können Promises verketten, indem Sie in .then() einen neuen Promise zurückgeben.

firstPromise()
  .then((result1) => {
    return secondPromise(result1);
  })
  .then((result2) => {
    console.log(result2);
  })
  .catch((error) => {
    console.error(error);
  });

Promise.all verwenden

Promise.all ermöglicht es, mehrere Promises parallel auszuführen und die Ergebnisse zu erhalten, wenn alle erfüllt sind.

const promise1 = fetchData1();
const promise2 = fetchData2();

Promise.all([promise1, promise2])
  .then(([result1, result2]) => {
    console.log(result1, result2);
  })
  .catch((error) => {
    console.error(error);
  });

Behandeln Sie Fehler immer mit .catch(). Wenn Sie dies ignorieren, können Fehler unentdeckt bleiben und zu schwer zu debuggenden Problemen führen.

Promises in React verwenden

In React müssen häufig asynchrone Aufgaben wie API-Aufrufe zum Abrufen von Daten durchgeführt werden. Die Verwendung von Promises hilft, diese Aufgaben effizient zu verwalten.

Fetch API mit Promises verwenden

fetch ist eine eingebaute API in JavaScript zum Abrufen von Daten, die einen Promise zurückgibt.

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Fehler:', error);
  });

In diesem Beispiel rufen wir die API unter https://jsonplaceholder.typicode.com/users auf, um eine Liste von Benutzern abzurufen.

Promises und useEffect in Komponenten verwenden

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
      })
      .catch((error) => {
        console.error('Fehler:', error);
      });
  }, []);

  return (
    <div>
      {users ? (
        <ul>
          {users.map((user) => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      ) : (
        <div>Lädt...</div>
      )}
    </div>
  );
}

export default UserList;

• useEffect mit leeren Abhängigkeiten [] wird nur einmal ausgeführt, wenn die Komponente gemountet wird.
• fetch wird verwendet, um die API aufzurufen und den Zustand users zu aktualisieren, sobald das Ergebnis empfangen wird.

Promise vs. Async/Await

Async/Await ist eine neue Syntax, die auf Promises basiert und Code synchroner erscheinen lässt, wodurch er lesbarer und verständlicher wird. Es verwendet try...catch zur Fehlerbehandlung und vermeidet die Verschachtelung von .then(). Die Verwendung von Async/Await erfordert jedoch ein gutes Verständnis von Promises. Verwenden Sie Async/Await, wenn Ihr Code synchron aussehen soll, lesbarer sein soll und Sie asynchrone Aufgaben sequenziell ausführen müssen. Verwenden Sie Promises, wenn Sie mehrere asynchrone Aufgaben gleichzeitig verwalten und Methoden wie Promise.all und Promise.race verwenden müssen.