Async function returning before await is complete

Question

I have two questions from the following example:

Why is does x log before y? Why is x a Promise?

I'm expecting bar to wait for foo to resolve with the value 'Hello' before it logs and then returns it.

let foo = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Hello');
        }, 2000);
    })
}

let bar = async () => {
    let y = await foo();
    console.log(y);
    return y;
}

let x = bar();

console.log(x);

What I'm expecting to see is

'Hello' // console.log(y)
'Hello' // console.log(x)

What I'm getting is

 Promise {<pending>}  // console.log(x)
 'Hello'              // console.log(y)

Shouldn't bar wait for foo to resolve before returning y?

Any help would be much appreciated!

`bar()` is an `async` function but you're not calling it with `await`. — Pointy, Oct 24 '18 at 14:09
according to documentation `async` function returns `Promise` https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function#Return_value — ivankoleda, Oct 24 '18 at 14:16
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Rajib Chy, Oct 24 '18 at 15:16

R.Duteil · Accepted Answer · 2018-10-24T14:32:36.063

Here is the documentation about async function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

And Promise object: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

It is stated that an async function returns a Promise object which is in a pending state until it is resolved.

Now let's look at your code:

You assign to x the return value of bar(), which is a Promise, since there is no await keyword to stop the execution (And you can not add one, because you are outside of an async function) this promise is logged as pending because the async function bar() has not yet returned.

Meanwhile, in the async function bar() you assign to y the return value of the async function foo() which is also a Promise, but this time you make it await for the result. After 2 seconds of waiting time, the promise is fulfiled and y is logged with the parameter of the resolve() method, which is Hello.

Thus the behaviour you witness is the expected one.

Thank you so much for this explanation! It's amazing how i miss the simple things for the docs. This, combined with @FrankModica's answer set me straight. — Galupuf, Oct 24 '18 at 14:51

Frank Modica · Answer 2 · 2018-10-24T14:19:17.017

7

You need to await the function:

let example = async () => {
    let foo = () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('Hello');
            }, 2000);
        })
    }

    let bar = async () => {
        let y = await foo();
        console.log(y);
        return y;
    }

    let x = await bar();

    console.log(x);
}

example();

edited Oct 24 '18 at 14:19

answered Oct 24 '18 at 14:09

Frank Modica

10,238
3
23
39

2

This will give error of `await is only valid in async function` – Ankit Agarwal Oct 24 '18 at 14:10
I guess the chrome console allows it to execute without being wrapped (Firefox did give an error). I edited the answer. – Frank Modica Oct 24 '18 at 14:16

score 0 · Answer 3 · answered Oct 24 '18 at 14:18

You should use an await before calling bar() but, actually, you can use await just when you wrapped it by a async function like below:

async function Func() {

  let foo = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Hello');
      }, 2000);
    })
  }

  let bar = async () => {
    let y = await foo();
    console.log(y);
    return y;
  }

  let x = await bar();

  console.log(x);

}

When you execute the Func(); your expectation will fire.

Async function returning before await is complete

3 Answers3

Linked

Related