Rückrufe, Callback Hell, Versprechen, Async/Warten

„Codieren kann sich manchmal wie ein spannender Film anfühlen – voller unerwarteter Wendungen.“ Aber was wäre, wenn Sie dafür sorgen könnten, dass Ihr Code so reibungslos abläuft wie eine gut inszenierte Szene? Willkommen in der Welt der Rückrufe, Versprechen und Asynchronität/Warten!“

1. Rückruf

Ein Callback ist eine Funktion, die Sie als Argument an eine andere Funktion übergeben, die dann nach Abschluss dieser Funktion ausgeführt wird. Stellen Sie sich das so vor: Sie bestellen eine Kinokarte online und sagen ihnen, dass sie Ihnen eine E-Mail (Rückruffunktion) senden sollen, wenn die Karte fertig ist.

Beispiel:
Stellen Sie sich vor, Sie bestellen online eine Eintrittskarte für den Film „Spider-Man 4“:

function orderTicket(movie, callback) {
    console.log(`Ordering ticket for ${movie}...`);
    // Simulate a delay with setTimeout
    setTimeout(() => {
        console.log('Ticket ordered successfully!');
        callback();  // Notify when the ticket is ready
    }, 2000);
}

function notifyUser() {
    console.log('Your ticket is ready! Enjoy the movie!');
}

orderTicket('Spider-Man 4', notifyUser);

Ausgabe:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Your ticket is ready! Enjoy the movie!

NotifyUser ist hier die Rückruffunktion, die aufgerufen wird, nachdem das Ticket bestellt wurde.

2. Callback Hell

Callback-Hölle passiert, wenn mehrere Callbacks ineinander verschachtelt sind, was das Lesen und Verwalten des Codes erschwert. Es sieht aus wie eine Pyramide oder eine Treppe und es ist schwierig zu verfolgen, was passiert.

Beispiel:
Stellen Sie sich nun vor, Sie möchten mehrere Dinge nacheinander erledigen, zum Beispiel Tickets bestellen, Popcorn holen und Ihren Sitzplatz finden:

function orderTicket(movie, callback) {
    console.log(`Ordering ticket for ${movie}...`);
    setTimeout(() => {
        console.log('Ticket ordered successfully!');
        callback();
    }, 2000);
}

function getPopcorn(callback) {
    console.log('Getting popcorn...');
    setTimeout(() => {
        console.log('Popcorn ready!');
        callback();
    }, 1000);
}

function findSeat(callback) {
    console.log('Finding your seat...');
    setTimeout(() => {
        console.log('Seat found!');
        callback();
    }, 1500);
}

orderTicket('Spider-Man 4', function() {
    getPopcorn(function() {
        findSeat(function() {
            console.log('All set! Enjoy the movie!');
        });
    });
});

Ausgabe:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

Das ist die Callback-Hölle: Sie können sehen, wie der Code verschachtelter und schwerer lesbar wird.

3. Versprechen

Ein Versprechen ist ein Objekt, das den eventuellen Abschluss (oder Misserfolg) eines asynchronen Vorgangs darstellt. Es ermöglicht Ihnen, saubereren Code zu schreiben und asynchrone Aufgaben einfacher zu bewältigen, ohne in die Callback-Hölle zu geraten.

Beispiel:
Vereinfachen wir das obige Beispiel mit Versprechen

function orderTicket(movie) {
    return new Promise((resolve) => {
        console.log(`Ordering ticket for ${movie}...`);
        setTimeout(() => {
            console.log('Ticket ordered successfully!');
            resolve();
        }, 2000);
    });
}

function getPopcorn() {
    return new Promise((resolve) => {
        console.log('Getting popcorn...');
        setTimeout(() => {
            console.log('Popcorn ready!');
            resolve();
        }, 1000);
    });
}

function findSeat() {
    return new Promise((resolve) => {
        console.log('Finding your seat...');
        setTimeout(() => {
            console.log('Seat found!');
            resolve();
        }, 1500);
    });
}

orderTicket('Spider-Man 4')
    .then(getPopcorn)
    .then(findSeat)
    .then(() => {
        console.log('All set! Enjoy the movie!');
    });

Ausgabe:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

Versprechen erleichtern das Lesen des Codes, indem sie .then()-Methoden verketten und so das Verschachtelungsproblem vermeiden.

4. Asynchron/Warten

Async/await ist eine moderne Syntax, die es Ihnen ermöglicht, asynchronen Code zu schreiben, der wie synchroner Code aussieht und sich verhält. Es basiert auf Versprechen und macht den Code noch sauberer und verständlicher.

Beispiel:
Lassen Sie uns async/await verwenden, um dasselbe Szenario zu behandeln

function orderTicket(movie) {
    return new Promise((resolve) => {
        console.log(`Ordering ticket for ${movie}...`);
        setTimeout(() => {
            console.log('Ticket ordered successfully!');
            resolve();
        }, 2000);
    });
}

function getPopcorn() {
    return new Promise((resolve) => {
        console.log('Getting popcorn...');
        setTimeout(() => {
            console.log('Popcorn ready!');
            resolve();
        }, 1000);
    });
}

function findSeat() {
    return new Promise((resolve) => {
        console.log('Finding your seat...');
        setTimeout(() => {
            console.log('Seat found!');
            resolve();
        }, 1500);
    });
}

async function watchMovie() {
    await orderTicket('Spider-Man 4');
    await getPopcorn();
    await findSeat();
    console.log('All set! Enjoy the movie!');
}

watchMovie();

Ausgabe:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

Mit async/await ist der Code einfacher und ähnelt der Art und Weise, wie Sie den Prozess im wirklichen Leben beschreiben würden. Das Schlüsselwort „await“ pausiert die Ausführung, bis das Versprechen gelöst ist, sodass der Aktionsablauf leicht zu verfolgen ist.

Zusammenfassung :

• Rückruf: Eine Funktion, die ausgeführt wird, nachdem eine andere Funktion ihre Arbeit beendet hat.
• Callback Hell: Verschachtelte Callbacks führen zu schwer lesbarem Code.
• Versprechen: Eine sauberere Möglichkeit, asynchrone Aufgaben zu erledigen und die Rückrufhölle zu vermeiden.
• Async/Await: Eine moderne, leicht lesbare Syntax, die auf Versprechen für die Handhabung von asynchronem Code basiert.

„Indem Sie Callbacks, Promises und Async/Warten beherrschen, können Sie komplexen Code in ein nahtloses Erlebnis verwandeln. Verabschieden Sie sich von der Callback-Hölle und begrüßen Sie saubereres, effizienteres JavaScript. Viel Spaß beim Codieren!“

Das obige ist der detaillierte Inhalt vonRückrufe, Callback Hell, Versprechen, Async/Warten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!