Why calling an async function in JS is not blocking?

Question

Take a look at the following code:

function promised() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('Timeout'), 1000);
    });
}

async function awaited()
{
  const r = await promised();
  console.log('Line 10: ' + r);
  return r;
}

function start() {
  const r = awaited();
  console.log('Line 16: ' + r);
}

start();

console.log("All done");

When you run this code, you'll get:

Line 16: [object Promise]
All done
Line 10: Timeout

But I was expecting to get:

Line 10: Timeout
Line 16: Timeout
All done

My expectation was that await should have blocked the execution on line 9. But it seems it does not! My question is why?

awaited execution pauses, start's does not as it is not an async method with an await statement. Async methods don't ever block, that is their main purpose to not block. Synchronous functions block, hence why it is advised not to use methods like sync ajax requests. — Patrick Evans
– Patrick Evans, Commented Aug 17, 2018 at 18:00
Possible duplicate of Understanding Async/Await patterns in JavaScript — Pieter De Clercq
– Pieter De Clercq, Commented Aug 17, 2018 at 18:01
If you really want to behave the code like synchronous code (what you call blocking), you would've to use async for all functions up to the calling function and await the result of the those async functions. — Jan Wendland
– Jan Wendland, Commented Aug 17, 2018 at 18:21

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You need to write your code as:

    function promised() {
      return new Promise(resolve => {
        setTimeout(() => resolve("Timeout"), 1000);
      });
    }
    
    async function awaited() {
      const r = await promised();
      console.log("Line 10: " + r);
      return r;
    }
    
    function start() {
      const r = awaited();
      // r here is a promise, so you need to call then to wait until
      // awaited is finished.
      return r.then(d => console.log("Line 16: " + d));
    }
    
    start().then(() => console.log("All done"));

result:

// Line 10: Timeout

// Line 16: Timeout

// All done

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 17, 2018 at 18:04

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Mehran Over a year ago

Thanks for the post, but it seems async and await are just fancy words for the same Promise concept. They are not blocking at all!!!

Arup Rakshit Over a year ago

@Mehran No. const r = await promised(); this line pauses until it is done. console.log("Line 10: " + r); will not be executed until it is done. With promise, console.log("Line 10: " + r); will be executed.

Felix Kling Over a year ago

@Mehran: That's basically right. async/await are just syntactic sugar on top of promises.

dereli Over a year ago

It would be nice to extend the answer to include an answer for 'why', so it helps for future Googlers.

Arup Rakshit Over a year ago

@dereli which "why" part?

|

Collectives™ on Stack Overflow

Why calling an async function in JS is not blocking?

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related