When I create 3 different promises using this function:

const setTimer = (num) => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(num)
    }, 2000);
  })
} 

and then run them inside async/await function:

const func = async () => {
  const first = await setTimer(1)
  console.log(first);
  const second = await setTimer(2)
  console.log(second);
  const third = await setTimer(3)
  console.log(third);
}

func()

They run synchronously (one after each other) as expected.

Then I create 3 different promises using new promise directly:

const setTimer1 = new Promise((res, rej) => {
  setTimeout(() => {
    res(1)
  }, 2000);
})

const setTimer2 = new Promise((res, rej) => {
  setTimeout(() => {
    res(2)
  }, 2000);
})

const setTimer3 = new Promise((res, rej) => {
  setTimeout(() => {
    res(3)
  }, 2000);
})

And then run those 3 promises again in async/await function:

const func1 = async () => {
  const first = await setTimer1
  console.log(first);
  const second = await setTimer2
  console.log(second);
  const third = await setTimer3
  console.log(third);
}

func1()

They now run asynchronously (in parallel). Please help explain why. I have searched for really long but have not found the answer.

CodePudding user response：

It's easiest to understand the difference by comparing the following examples:

(async () => {
    const p1 = new Promise(resolve => setTimeout(resolve, 2000));
    const p2 = new Promise(resolve => setTimeout(resolve, 2000));
    const p3 = new Promise(resolve => setTimeout(resolve, 2000));

    await p1;
    console.log(1); // 2 seconds later
    await p2;
    console.log(2); // 0 seconds later
    await p3;
    console.log(3); // 0 seconds later
})();

All Promises are created immediately one after another, so at the time when the first one is ready, all of them are. That's why you will get 1, 2 and 3 in your console at the same time.

But now consider this example:

(async () => {
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log(1); // 2 seconds later
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log(2); // 2 seconds later
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log(3); // 2 seconds later
})();

This time, the second Promise gets instantiated after the first one is resolved, so after 2 seconds. Same goes with the third one waiting for the second one. And this is why you will get 1 after 2 seconds, 2 after another 2 seconds and 3 after yet another 2 seconds.

To understand why, it's enough to know that the Promise tries to be as fast as possible. It starts its job as soon as it's created. And that's a good thing!

CodePudding user response：

Your latter three declarations are not functions. They assign each a promise that runs the moment each is created. So, they should be coded like your first, where the promise is created only when the function is invoked:

const setTimer1 = () => new Promise((res, rej) => {
  setTimeout(() => {
    res(1)
  }, 2000);
})

const setTimer2 = () => new Promise((res, rej) => {
  setTimeout(() => {
    res(2)
  }, 2000);
})

const setTimer3 = () => new Promise((res, rej) => {
  setTimeout(() => {
    res(3)
  }, 2000);
})

Then you need to invoke each function:

const func1 = async () => {
  const first = await setTimer1();
  console.log(first);
  const second = await setTimer2();
  console.log(second);
  const third = await setTimer3();
  console.log(third);
}

func1()

The required changes are very subtle, adding only a few characters. Compare with your code to see the differences.