Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Verständnis von Callbacks in JavaScript | Asynchrones JavaScript und API-Integration
Fortgeschrittene JavaScript-Beherrschung

bookVerständnis von Callbacks in JavaScript

Was ist ein Callback?

In JavaScript werden Callbacks häufig verwendet, um asynchrone Aufgaben zu verarbeiten, wie zum Beispiel das Abrufen von Daten aus 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 benötigen, ohne die Ausführung des restlichen Codes zu blockieren.

Funktionsweise von Callbacks in der asynchronen Programmierung

Bei einer asynchronen Operation wird eine Callback-Funktion ausgeführt, sobald die Operation abgeschlossen ist. Dadurch kann der Rest des Programms fortgesetzt werden, während auf den Abschluss der Aufgabe gewartet wird.

index.html

index.html

index.js

index.js

copy
  • fetchData: Simuliert eine asynchrone Operation (wie das Abrufen von Daten), die 2 Sekunden dauert. 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 die Operation abgeschlossen ist;
  • Der restliche Code wird weiterhin 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 leistungsfähig sind, können sie schnell zu Problemen führen, wenn viele asynchrone Operationen voneinander abhängen. Dies führt häufig zur „Callback-Hölle“, bei der Callbacks tief verschachtelt sind und der Code schwer lesbar und wartbar wird.

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 das Problem des Callback-Hell, das auftritt, wenn mehrere asynchrone Operationen voneinander abhängig sind 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 Steuerung des Ablaufs und zukünftige Änderungen, wodurch der Code mit zunehmender Anzahl von Callbacks unübersichtlich wird.

Refaktorisierung von Callbacks für übersichtlicheren Code

Um Callback-Hell zu vermeiden und die Lesbarkeit sowie Wartbarkeit des Codes zu verbessern, gibt es einige Strategien zur Refaktorisierung von Callbacks:

Benannte Funktionen: Anstatt anonyme Callback-Funktionen zu verwenden, sollten benannte Funktionen erstellt werden, die wiederverwendbar sind und den Code besser strukturieren.

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 Ablauf des Codes klarer. Er ist leichter zu verstehen, zu warten und zu debuggen als tief verschachtelte anonyme Callbacks.

Logik aufschlüsseln: Komplexe Aufgaben in kleinere Funktionen unterteilen. Jede Funktion sollte eine spezifische Operation ausführen und die nächste Operation aufrufen. Dies reduziert Verschachtelungen und macht den Code modularer.

Promises (werden in späteren Kapiteln behandelt): Promises sind eine moderne Alternative zu Callbacks und bieten eine übersichtlichere, besser lesbare Möglichkeit, asynchrone Operationen zu handhaben. Promises helfen, das sogenannte Callback-Hell zu vermeiden, indem .then()-Methoden verkettet werden.

1. Was ist eine Callback-Funktion?

2. Was ist "Callback-Hell"?

question mark

Was ist eine Callback-Funktion?

Select the correct answer

question mark

Was ist "Callback-Hell"?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you give an example of a simple callback in JavaScript?

What are some common use cases for callbacks in real-world applications?

How do callbacks differ from promises in handling asynchronous code?

Awesome!

Completion rate improved to 2.22

bookVerständnis von Callbacks in JavaScript

Swipe um das Menü anzuzeigen

Was ist ein Callback?

In JavaScript werden Callbacks häufig verwendet, um asynchrone Aufgaben zu verarbeiten, wie zum Beispiel das Abrufen von Daten aus 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 benötigen, ohne die Ausführung des restlichen Codes zu blockieren.

Funktionsweise von Callbacks in der asynchronen Programmierung

Bei einer asynchronen Operation wird eine Callback-Funktion ausgeführt, sobald die Operation abgeschlossen ist. Dadurch kann der Rest des Programms fortgesetzt werden, während auf den Abschluss der Aufgabe gewartet wird.

index.html

index.html

index.js

index.js

copy
  • fetchData: Simuliert eine asynchrone Operation (wie das Abrufen von Daten), die 2 Sekunden dauert. 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 die Operation abgeschlossen ist;
  • Der restliche Code wird weiterhin 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 leistungsfähig sind, können sie schnell zu Problemen führen, wenn viele asynchrone Operationen voneinander abhängen. Dies führt häufig zur „Callback-Hölle“, bei der Callbacks tief verschachtelt sind und der Code schwer lesbar und wartbar wird.

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 das Problem des Callback-Hell, das auftritt, wenn mehrere asynchrone Operationen voneinander abhängig sind 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 Steuerung des Ablaufs und zukünftige Änderungen, wodurch der Code mit zunehmender Anzahl von Callbacks unübersichtlich wird.

Refaktorisierung von Callbacks für übersichtlicheren Code

Um Callback-Hell zu vermeiden und die Lesbarkeit sowie Wartbarkeit des Codes zu verbessern, gibt es einige Strategien zur Refaktorisierung von Callbacks:

Benannte Funktionen: Anstatt anonyme Callback-Funktionen zu verwenden, sollten benannte Funktionen erstellt werden, die wiederverwendbar sind und den Code besser strukturieren.

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 Ablauf des Codes klarer. Er ist leichter zu verstehen, zu warten und zu debuggen als tief verschachtelte anonyme Callbacks.

Logik aufschlüsseln: Komplexe Aufgaben in kleinere Funktionen unterteilen. Jede Funktion sollte eine spezifische Operation ausführen und die nächste Operation aufrufen. Dies reduziert Verschachtelungen und macht den Code modularer.

Promises (werden in späteren Kapiteln behandelt): Promises sind eine moderne Alternative zu Callbacks und bieten eine übersichtlichere, besser lesbare Möglichkeit, asynchrone Operationen zu handhaben. Promises helfen, das sogenannte Callback-Hell zu vermeiden, indem .then()-Methoden verkettet werden.

1. Was ist eine Callback-Funktion?

2. Was ist "Callback-Hell"?

question mark

Was ist eine Callback-Funktion?

Select the correct answer

question mark

Was ist "Callback-Hell"?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 2
some-alt