JavaScript async/await not awaiting properly?

Question

I'm having an issue with JavaScript's async/await functions. This is happening on an internal application that I can't share the source for, but I put together a quick generic reproduction of my issue:

 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function baz(input) { console.log("4"); await sleep(1000); console.log("5"); return input; } async function bar(input) { console.log("3"); return await baz(input); } async function foo() { console.log("2"); const foo = await bar("foo"); return foo; } console.log("1"); foo(); console.log("6"); 

I would expect this to return the following with a one second wait between 4 and 5 :

1
2
3
4
5
6
"foo"

Instead, after trying this in the console in Chrome 64.0.3282.167 and Firefox 58.0.2 I receive this:

1
2
3
4
6
undefined
5

Please can someone point out where I'm going wrong in this?

Answer 1

The top-level is running synchronously (as it always does) - it doesn't wait for foo(); to resolve before continuing to console.log("6"); . Wrap the calling of foo in something async and await it. You also need to save the return value of foo if you want to display its later:

 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function baz(input) { console.log("4"); await sleep(1000); console.log("5"); return input; } async function bar(input) { console.log("3"); return await baz(input); } async function foo() { console.log("2"); const foo = await bar("foo"); return foo; } (async () => { console.log("1"); const str = await foo(); console.log("6"); console.log(str); })();