How to run code asynchronously from within an async function?

Question

If you call an async function from non-async code, anything after the await runs asynchronously with respect to the caller:

async function asyncInner() {
  console.log('before asyncInner');
  await Promise.resolve()
  console.log('after asyncInner');
}

console.log('start');
asyncInner()
console.log('end');

In other words, this prints:

start
before asyncInner
end
after asyncInner

But if you call this async function from within another async function:

async function asyncInner() {
  console.log('before asyncInner');
  await Promise.resolve()
  console.log('after asyncInner');
}

async function asyncOuter() {
  console.log('before asyncOuter');
  await asyncInner();
  console.log('after asyncOuter');
}

console.log('start');
asyncOuter()
console.log('end');

you get:

start
before asyncOuter
before asyncInner
end
after asyncInner
after asyncOuter

In other words, the inner method completes synchronously with respect to the outer method. Why is this and how could it be written so that asyncOuter completed before the asyncInner?

(I know I could use a setTimeout for this, but I'd prefer to avoid using callbacks, because one of the nice things about async is avoiding callback hell.)

the inner method completes synchronously No it doesn't, that's maybe were your getting confused. — Keith
– Keith, Commented Nov 15, 2021 at 14:39
Awesome clear demo of the behavior you are looking to better understand. Two requests: 1. Could you clarify precisely what kind of output you would like to get, including all 6 printouts? 2. Could you reframe your why question into a what or how? This may help you get a clearer answer to what you would like to know (eg. "What specifically causes an async function called within another async function to behave synchronously?") — Avi Drucker
– Avi Drucker, Commented Nov 15, 2021 at 14:43
@Keith: I see that I was confusing "synchronous" with "waited". — Joshua Frank
– Joshua Frank, Commented Nov 15, 2021 at 14:47

Nicholas Tower · Accepted Answer · 2021-11-15 14:38:23Z

4

In other words, the inner method completes synchronously with respect to the outer method. Why is this and how could it be written so that asyncOuter completed before the asyncInner?

It's not actually synchronous, but you're right that it will wait for the inner function to finish before continuing the outer function. The reason it will wait is because you told it to wait with the await keyword. If you don't want it to wait, simply leave that out.

async function asyncInner() {
  console.log('before asyncInner');
  await Promise.resolve()
  console.log('after asyncInner');
}

async function asyncOuter() {
  console.log('before asyncOuter');
  asyncInner(); // <--------- removed the await
  console.log('after asyncOuter');
}

console.log('start');
asyncOuter()
console.log('end');

answered Nov 15, 2021 at 14:38

Nicholas Tower

87.1k10 gold badges115 silver badges127 bronze badges

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

1 Comment

Joshua Frank Over a year ago

Thanks for the explanation. I see that I was confusing "synchronous" and "waited". What I really want, I realize, is a way to say "let this routine complete and then call the subsequent code". In other words, just syntactic sugar for setTimeout, and await is basically unrelated to this.

Keith · Accepted Answer · 2021-11-15 15:08:46Z

1

@Keith: I see that I was confusing "synchronous" with "waited".

Even then it's kind of vague. await in Javascript is really some fancy syntax sugar for promise.then(result => {}) So nothing really waits, it's just callback hell is converted into something that looks synchronous, and as such much easier to reason with.

It might make more sense if we remove await, and do it the old fashioned way of using the thenable.

So below I have converted your example to run without await, and as you can see it gives the same result, but this time we are using callback's. So if you understand callback's, it then makes more sense why you get the result you do.

function asyncInner() {
  console.log('before asyncInner');
  return Promise.resolve().then(r => 
    console.log('after asyncInner'));
}

function asyncOuter() {
  console.log('before asyncOuter');
  return asyncInner().then(() => 
    console.log('after asyncOuter'));
}

console.log('start');
asyncOuter()
console.log('end');

answered Nov 15, 2021 at 15:08

Keith

24.4k2 gold badges32 silver badges48 bronze badges

1 Comment

Joshua Frank Over a year ago

This does make it easier to follow, at the cost of parentheses and other callback syntax pain.

Collectives™ on Stack Overflow

How to run code asynchronously from within an async function?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related