11
function resolveAfter2Seconds(x) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(x);
        }, 2000);
    });
}

async function f1() {
    var x = await resolveAfter2Seconds(10);
    console.log(x); 
}

f1();
let x =  3;

Why do we see the following scenario?

  1. Entering the f1. Stops on await.
  2. Returns from f1 (console.log(x) command doesn't execute)
  3. assign 3 to x (ERROR! await skipped, js steps forward)
  4. Return to f1 on line "console.log(x)". Print x.

Why JS not waiting on await and steps forward? May you give me an advice?

2
  • 2
    Because you didn't await your outer function call.
    – SLaks
    Commented May 2, 2019 at 20:48
  • 1
    @4castle, await should be used in async function. Commented May 3, 2019 at 13:48

2 Answers 2

12

f1 is asynchronous (the await only occurs within that asynchronous context). Therefore, f1() is executed, and because it's async, the let x = 3; line executes immediately without waiting.

If you also await the call to f1(), it should do what you're expecting. However in order to use await, you must wrap that code inside another async function, and then execute that function.

Demo (no await):

function resolveAfter2Seconds(x) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(x);
        }, 2000);
    });
}

async function f1() {
    var x = await resolveAfter2Seconds(10);
    console.log(x); 
}

f1();
let x =  3;
console.log(x);

Working version (with extra await):

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x);
}

async function f2() {
  await f1();
  let x = 3;
  console.log(x);
};

f2();

You can't use await outside an async context...so at the end of the chain something has to be async. The bottom line is, anything you want to be waiting until after the f1() executes must be either

  • inside the f2() function after the await, or
  • executed within a .then() callback attached to the promise.
3
  • But if I put "let y = 4" after "f2()" it instantly moves to "let y = 4" and skips promise! Commented May 3, 2019 at 13:46
  • 2
    yes. That's because f2() is now the async function. You've just replicated your original situation. You can't use await outside an async context...so at the end of the chain something has to be async. Bottom line is, anything you want to be waiting until after the f1() executes must be either a) inside the f2() function after the await, or b) executed within a .then() callback attached to the promise.
    – ADyson
    Commented May 3, 2019 at 13:48
  • @ADyson you should make that comment a part of your answer.
    – Joe
    Commented Aug 10, 2023 at 6:55
4

More simpler

(async function() {

  function resolveAfter2Seconds(x) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(x);
      }, 2000);
    });
  }

  async function f1() {
    var x = await resolveAfter2Seconds(10);
    console.log(x);
  }


  await f1();
  let x = 3; 
  console.log(x);
})();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.