2

I've seen a few articles explaining the concept of promise and async/await, here is an example.

But I still can't figure out how the following code works and why the output is that.

I will appreciate it if someone can solve my confusion.

code

const promiseFn = (n) =>
  new Promise((res, rej) => {
    res(n);
  });

promiseFn(1)
  .then((data) => {
    console.log(data);
    return promiseFn(2);
  })
  .then((data) => {
    console.log(data);
  });

const data3 = await promiseFn(3);
console.log(data3);

const data4 = await promiseFn(4);
console.log(data4);

The output is:

1 3 4 2

But what I thought the output should be

1 3 2 4

And I thought the code of async/await might be converted to the following

const promiseFn = (n) =>
  new Promise((res, rej) => {
    res(n);
  });

promiseFn(1)
  .then((data) => {
    console.log(data);
    return promiseFn(2);
  })
  .then((data) => {
    console.log(data);
  });

Promise.resolve(promiseFn(3))
  .then((data) => {
    console.log(data);
    return Promise.resolve(promiseFn(4));
  })
  .then((data) => {
    console.log(data);
  });

But the output is below which is not as same as the async/await version.

1 3 2 4

So I think I misunderstood the difference between Promise and async/await.

Thank so much you for helping me figure it out.

Based on the code of promise version above, I tried to wrap the 2nd promise to the 1st one instead of returning the function as below, the output seems to be different which made me even more confused.

const promiseFn = (msg) =>
  new Promise((res, rej) => {
    res(msg);
  });

promiseFn(1)
  .then((data) => {
    console.log(data);
    return promiseFn(2);
  })
  .then((data) => {
    console.log(data);
  });

Promise.resolve(promiseFn(3)).then((data) => {
  console.log(data);
  Promise.resolve(promiseFn(4)).then((data) => {
    console.log(data);
  });
});

output :

1 3 4 2

Rick
  • 29
  • 1
  • 2
    I'm not an expert with how it works under the hood, but I do know this for sure: In your first example, what you have explicitly guaranteed is that `2` comes after `1`, and `4` comes after `3`. Here, you create 4 promises, but they aren't all chained to each other. since `2` is happening in side a `then` call chained onto `1`, `2` _must_ happen _after_ `1`. Since `4` is created after `3` has been `await`ed, `4` _must_ happen _after_ `3`. However, you have made no such restriction about when `2` happens relative to `4`. `2` is just after `1` and `4` is after `3`. – nullromo Mar 09 '23 at 17:53
  • What @nullromo said. Sure, there's an order between the independent promise chains that the engine will choose, and it'll be deterministic (reproducible), but you should not rely on it, and you should not need to understand why. With promises that are immediately resolved, queuing order depends on minor details in the language specification (details that can change for optimisation purposes!), and in real-world code, you won't encounter immediately-resolved promises anyway. – Bergi Mar 09 '23 at 20:38

0 Answers0