'async/await' em JavaScript: detalhamento fácil

Tive dificuldade em aprender o conceito de async e await em JavaScript, é por isso que quero explicar aqui da maneira mais simples possível, para que você não ache nada difícil:

Para as funções assíncronas, presumo que você já conheça Promises em JS, caso contrário, leia sobre a promessa em JavaScript aqui:

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

funções assíncronas :

Uma função pode se tornar assíncrona usando a palavra-chave 'async'. Pode conter zero ou mais expressões 'await'.

Ele funciona com Promise para evitar várias situações de .then() na cadeia de promessas ou para escrever comportamento baseado em promessas de maneira clara.

Declaração: pode ser declarado usando 'função assíncrona' onde a palavra-chave 'aguardar' é permitida no corpo da função.

Await expressão suspende a execução até que a promessa de retorno seja cumprida ou rejeitada, fazendo com que a função de promessa se comporte de forma síncrona.

await só é válido dentro da função assíncrona.

Exemplo usando promessa:

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();