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.
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!
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.