Was ist ein Callback?

In JavaScript werden Callbacks häufig verwendet, um asynchrone Aufgaben zu bearbeiten, wie das Abrufen von Daten von einer API, das Lesen von Dateien oder das Warten auf Benutzereingaben.

Callbacks bilden die Grundlage der asynchronen Programmierung in JavaScript, da sie es dem Programm ermöglichen, Aufgaben zu bearbeiten, die Zeit in Anspruch nehmen, ohne die Ausführung des restlichen Codes zu blockieren.

Wie Callbacks in der asynchronen Programmierung funktionieren

Bei einem asynchronen Vorgang wird eine Callback-Funktion ausgeführt, sobald der Vorgang abgeschlossen ist, um sicherzustellen, dass der Rest des Programms fortgesetzt werden kann, während auf den Abschluss der Aufgabe gewartet wird.

• fetchData: Simuliert einen asynchronen Vorgang (wie das Abrufen von Daten), der 2 Sekunden dauert, um abgeschlossen zu werden. Die Callback-Funktion wird aufgerufen, sobald die Daten verfügbar sind;
• displayData: Die Callback-Funktion, die an fetchData übergeben wird. Sie wird mit den abgerufenen Daten aufgerufen, sobald der Vorgang abgeschlossen ist;
• Der Rest des Codes wird weiter ausgeführt, während die Daten abgerufen werden, und wenn die Daten bereit sind, wird der Callback ausgelöst, um sie zu verarbeiten.

Probleme mit Callbacks: Callback-Hölle und Verschachtelung

Obwohl Callbacks mächtig sind, können sie schnell zu Problemen führen, wenn viele asynchrone Operationen voneinander abhängen. Dies führt oft zu "Callback-Hölle", bei der Callbacks tief verschachtelt sind, was den Code schwer lesbar und wartbar macht.

getUser(1, user => {
  console.log('User fetched:', user);

  getOrders(user.id, orders => {
    console.log('Orders fetched:', orders);

    getOrderDetails(orders[0].id, orderDetails => {
      console.log('Order details fetched:', orderDetails);

      getShippingStatus(orderDetails.shippingId, status => {
        console.log('Shipping status fetched:', status);
      });
    });
  });
});

Dieses Beispiel veranschaulicht die Callback-Hölle, ein Problem, das auftritt, wenn mehrere asynchrone Operationen voneinander abhängen und zu tief verschachtelten Callbacks führen. Hier hängt jede Funktion (getUser, getOrders, getOrderDetails, getShippingStatus) vom Ergebnis der vorherigen ab, was zu einer verschachtelten Struktur führt, die schwer zu lesen, zu warten und zu debuggen ist. Dieser Ansatz erschwert die Fehlerbehandlung, die Ablaufsteuerung und zukünftige Änderungen, was den Code unhandlich macht, wenn die Anzahl der Callbacks zunimmt.

Refactoring von Callbacks für saubereren Code

Um die Callback-Hölle zu vermeiden und die Lesbarkeit und Wartbarkeit Ihres Codes zu verbessern, gibt es einige Strategien, um Callbacks zu refaktorisieren:

Benannte Funktionen: Anstatt anonyme Callback-Funktionen zu verwenden, erstellen Sie benannte Funktionen, die wiederverwendet werden können und den Code besser organisieren.

function getUserCallback(user) {
  console.log('User fetched:', user);
  getOrders(user.id, getOrdersCallback);
}

function getOrdersCallback(orders) {
  console.log('Orders fetched:', orders);
  getOrderDetails(orders[0].id, getOrderDetailsCallback);
}

function getOrderDetailsCallback(orderDetails) {
  console.log('Order details fetched:', orderDetails);
  getShippingStatus(orderDetails.shippingId, getShippingStatusCallback);
}

function getShippingStatusCallback(status) {
  console.log('Shipping status fetched:', status);
}

getUser(1, getUserCallback);

Durch die Verwendung benannter Funktionen wird der Fluss des Codes klarer. Es ist einfacher zu verstehen, zu warten und zu debuggen als tief verschachtelte anonyme Rückruffunktionen.

Aufschlüsselung der Logik: Zerlegen Sie komplexe Aufgaben in kleinere Funktionen. Jede Funktion sollte eine spezifische Operation ausführen und die nächste Operation aufrufen. Dies reduziert die Verschachtelung und macht den Code modularer.

Promises (werden in späteren Kapiteln behandelt): Promises sind eine moderne Alternative zu Rückrufen und bieten eine sauberere, besser lesbare Möglichkeit, asynchrone Operationen zu handhaben. Promises helfen, das Callback-Hell zu eliminieren, indem sie .then()-Methoden verketten.