Rückrufe

In JavaScript haben wir verschiedene Möglichkeiten, asynchrone Aufrufe zu verarbeiten.
Damit können Sie asynchrone Aufgaben wie das Abrufen von Daten von einem Server, das Lesen von Dateien oder das Warten auf ein Ereignis erledigen.

Rückrufe

Dies ist eine Funktion, die eine andere Funktion aufruft.
Sehen wir uns ein Beispiel an, damit wir es besser verstehen:

• Aufruf von getUser() mit einer ID und einer Rückruffunktion, die die Benutzer-ID, den Namen und die E-Mail-Adresse ausgibt. Der Rückruf wird ausgeführt, sobald der asynchrone getUser-Vorgang abgeschlossen ist.

Die getUser()-Funktion:

• id: Dies ist die ID des Benutzers, den Sie abrufen möchten, übergeben vom getUser(1, ...)-Aufruf.

• Rückruf: Dies ist die Funktion, die aufgerufen wird, nachdem die „Benutzerdaten“ abgerufen wurden (hier simuliert durch die Funktion setTimeout()).

• Innerhalb der Funktion setTimeout() wird die Funktion callback() nach der Verzögerung aufgerufen und übergibt ein Scheinbenutzerobjekt als Argument: { id: id, name: 'Diana', email: 'Diana@test. com' }.

Ausführungsablauf:

1. getUser(1, user => { console.log('User', user); }); heißt.
2. In getUser() wird mit setTimeout() eine Verzögerung von 3 Sekunden ausgelöst.
3. Nach 3 Sekunden: Die Meldung „Benutzer aus Datenbank abrufen...“ wird in der Konsole protokolliert. Die Rückruffunktion wird mit dem Benutzerobjekt { id: 1, name: 'Diana', email: 'Diana@test.com' } aufgerufen.
4. Die Rückruffunktion protokolliert den Benutzer und das Benutzerobjekt in der Konsole.

Endgültige Ausgabe:

Rückruf Hölle

Callback-Höllenmuster – Dies geschieht, wenn mehrere asynchrone Vorgänge voneinander abhängen, was zu tief verschachtelten Rückrufe führt. Mit zunehmender Verschachtelung wird es schwieriger, den Code zu lesen, zu warten und zu debuggen. Sehen wir uns ein Beispiel an:

Lassen Sie es uns aufschlüsseln:

• Benutzer abrufen: Hier initiieren wir den ersten asynchronen Aufruf, getUser(1), der das Abrufen von Benutzerdaten aus einer Datenbank simuliert. Sobald die Daten abgerufen wurden, wird die Rückruffunktion ausgeführt und die Benutzerdetails in der Konsole protokolliert.

getUser(1, user => {
    console.log('User', user);
    // ...
});

Abrufen der Bestellungen des Benutzers:
Innerhalb des Rückrufs für getUser() rufen wir getOrders(user.id) erneut asynchron auf und simulieren so das Abrufen der Bestellungen des Benutzers aus der Datenbank. Dies erfordert die Verschachtelung eines weiteren Rückrufs innerhalb des ersten. Sobald die Bestellungen abgerufen wurden, werden die Bestellungen protokolliert.

getUser(1, user => {
    console.log('User', user);
    // ...
});

• Abrufen der Bestelldetails: Nachdem wir die Bestellungen abgerufen haben, müssen wir die Details einer bestimmten Bestellung (Bestellungen[1]) abrufen. Dies führt zu einer dritten Verschachtelungsebene, bei der getOrdersDetails() aufgerufen wird, um die Bestelldetails abzurufen, und diese dann in der Konsole protokolliert.

getOrders(user.id, orders => {
    console.log(`${user.name}'s orders`, orders);
    // ...
});

Codestruktur (Verschachtelung):

Beachten Sie, dass jede asynchrone Operation von der vorherigen abhängt, was zu einer tief verschachtelten Struktur führt. Den Code erschweren:

1. Lesen Sie: Es ist schwierig, dem Ablauf der Logik zu folgen, wenn Rückrufe tief verschachtelt sind.

2. Fehlerbehandlung: Es ist schwierig, Fehler auf mehreren Rückrufebenen zu behandeln.

3.Debug: Die Identifizierung, wo ein Fehler auftritt, wird komplexer, wenn viele Rückrufebenen beteiligt sind.

Außerdem macht es den Code zu einer „engen Kopplung“ – jede Funktion hängt von der Ausgabe der vorherigen ab, was bedeutet, dass der Code eng gekoppelt ist, was die Wiederverwendbarkeit verringert.

Ergebnis:

Rückrufhölle vermeiden:
Die Callback-Hölle kann durch die Verwendung moderner JavaScript-Funktionen wie Promises und Async/Await vermieden werden. Mit diesen Methoden kann asynchroner Code besser lesbar und sequenziell geschrieben werden.

Das obige ist der detaillierte Inhalt vonRückrufe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!