code inside async function executes before the code that follows it

Question

I'm currently exploring the concept of async/await in javascript.I know that async function returns a promise which supposed to resolve in a future time and it doesn't block the natural execution of code.Here I have a code which i wrote to test the async execution of javascript.

console.log("1")
async function asyncFunc(){
  for(i=0;i<10000000;i++){
  }
  console.log("3")
}
asyncFunc().then(()=>{console.log('4')});
console.log("2");

I except the code will be executed in the following fashion:

first console.log() prints 1

secondly async function is called. As async code is non blocking,last console.log() will execute and thus prints 2 in the console.

After that console.log() inside async function will be executed and will print 3 in console.

lastly the promise will be resolved and console.log() inside then will be executed and prints 4.

so expected output : 1,2,3,4

but in reality I get output as 1,3,2,4.

why it behaves like this and not the way I expected

The aync keyword doesn't actually make the code in the function async unfortunately. — Phillip Burch
– Phillip Burch, Commented Dec 15, 2017 at 17:20
if you want to force the function to run asynchronously, then add await Promise.resolve() as first line of the function. — Brandon
– Brandon, Commented Dec 15, 2017 at 17:45

Quentin · Accepted Answer · 2017-12-15 17:29:38Z

6

The function doesn't return a promise until it has finished running (unless you await another promise inside it).

The loop runs (blocking everything), then console.log("3") is evaluated, then it returns a promise.

The calling function continues to run (logging 2).

Finally, the event loop is freed up and the function passed to then is called.

Marking a function as async doesn't turn synchronous code inside it into asynchronous code.

edited Dec 15, 2017 at 17:29

answered Dec 15, 2017 at 17:17

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

5 Comments

AL-zami Over a year ago

declaring it async i expect it to be async.if it still blocks then what's the point ?

Quentin Over a year ago

@AL-zami — It provides nicer syntax for when you are dealing with code which is async (since you can use syntax that deals in returns instead of callbacks).

AL-zami Over a year ago

your last comment made it even more difficult to grasp unfortunately :(

Quentin Over a year ago

Look at the MDN page for async. It has examples.

gotofritz Over a year ago

Async means that it is ENABLED to run as async, but doesn't make it async. 'await' inside the async function is what makes it async. There are no 'await' inside asyncFunc, so it's not really async

T.J. Crowder · Accepted Answer · 2018-02-07 09:34:02Z

Late answer here, and Quentin is exactly right, but it's helpful sometimes to diagram these things. Let's look at really simple async function:

async function foo() {
    console.log("a");
    await something();
    console.log("b");
    return 42;
}

That function has two parts:

A synchronous part: Everything up to (but not including) the first await or return (or if it just ends). So in the above, that's the console.log("a"); and the call to something (but not the bit waiting for its result).
An asynchronous part: Anything following that first await.

If we were to rewrite that function with explicit promises, it would look something like this (hand-waving away details):

function foo() {
    console.log("a");
    return something().then(() => {
        console.log("b");
        return 42;
    });
}

So looking at your function:

async function asyncFunc(){
  for(i=0;i<10000000;i++){
  }
  console.log("3")
}

...we can see that all of the code in the function is in its initial synchronous part, and the promise it returns will be resolved with undefined.

So why do async functions have a synchronous part? For the same reason the executor function you pass into new Promise runs synchronously: So it can start its work right away.

Suppose we wanted to do an async wrapper around fetch where we expect a JSON response:

async function fetchJSON(...args) {
    const response = fetch(...args);
    return response.json();
};

If that didn't have a synchronous part (the call to fetch(...args)), it would never do anything and its promise would never be settled.

Collectives™ on Stack Overflow

code inside async function executes before the code that follows it

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related