'async/await' in JavaScript: einfache Aufschlüsselung

Ich hatte Schwierigkeiten, das Async & await-Konzept in JavaScript zu lernen, deshalb möchte ich es hier so einfach wie möglich erklären, damit Sie es überhaupt nicht schwierig finden:

Für die asynchronen Funktionen nehme ich an, dass Sie bereits über Promises in JS Bescheid wissen. Wenn nicht, lesen Sie bitte hier etwas über Promises in JavaScript:

https://amitabhiam.medium.com/i-promise-this-way-promise-won-t-break-your-heart-in-javascript-promises-727747b8a6ec

Async-Funktionen :

Eine Funktion kann mit dem Schlüsselwort „async“ asynchron gemacht werden. Es kann null oder mehr 'await'-Ausdrücke enthalten.

Es funktioniert mit Promise, um mehrere .then()-Situationen in der Promise-Kette zu vermeiden oder Promise-basiertes Verhalten in einem klaren Stil zu schreiben.

Deklaration: Sie kann mit „async function“ deklariert werden, wobei das Schlüsselwort „await“ im Funktionskörper zulässig ist.

Der await-Ausdruck setzt die Ausführung aus, bis das Rückgabeversprechen erfüllt oder abgelehnt wurde, wodurch sich die Promise-Funktion synchron verhält.

await ist nur innerhalb der async-Funktion gültig.

Beispiel mit Promise:

function resolveAfter6Second() {
    console.log("starting a slow promise");
    return new Promise ((resolve) => {
        setTimeout( function () {
            resolve("slow");
            console.log("This is slow promise");
        }, 6000);
    } );
}

function resolveAfter3Second() {
    console.log("starting fast promise");
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("fast");
        console.log("fast promise is done");
      }, 3000);
    });
  }


async function sequentialStart() {
    console.log("performing Sync Operation");

    const slow = await resolveAfter6Second();
    console.log(slow);

    const fast = await resolveAfter3Second();
    console.log(fast);
}

sequentialStart();