loading...

Async/Await - Pause what?

bidipeppercrap profile image Fransisco Wijaya Updated on ・1 min read

Confused over async/await?
Here's some TLDR; info about it.

Await only pauses its parent Async function

const messages = return new Promise((resolve), () => {
    setTimeout(() => {
        resolve(["Hey", "Good day"]);
    }, 5000);
});

async function sendMessages() { // <-- Await only pauses this function
    console.log("Sending message...");
    console.log("Message sent: ", await messages); // <-- If await reached, it executes code outside this async function, and pause this async function
}

// Let's proof it
console.log("Start");
sendMessages();
console.log("End");

// Output:

// Start
// Sending message...                  <-- sendMessage() function
// End                                 <-- Proof, await makes execution continue outside its function
// Message sent: ["Hey", "Good day"]   <-- After 5 seconds, this appears

This proof that await jumps the code execution outside its async function whenever called.
You can see that await only pauses its parent async function, not the entire code outside that function.
See console.log("End") called before finishing the await.

But I don't want it, I want my code executed orderly / step by step / synchronously!

I got you, here's to solve that:

const messages = return new Promise((resolve), () => {
    setTimeout(() => {
        resolve(["Hey", "Good day"]);
    }, 5000);
});

async function sendMessages() {
    console.log("Sending message...");
    console.log("Message sent: ", await messages);
}

// -- Old Code
// console.log("Start");
// sendMessages();
// console.log("End");

// -- New Code
async function log() {
    console.log("Start");
    await sendMessages();
    console.log("End");
}
log();

// Output:
// Start
// Sending message...                  <-- sendMessage() function
// Message sent: ["Hey", "Good day"]   <-- After 5 seconds, this appears
// End

What did I do?
Wrap everything to be executed orderly inside an async function, add await to a "promising" function.

Posted on by:

Discussion

pic
Editor guide