含双await的async/await转Promise逻辑及代码输出差异解惑

我已经阅读过若干讲解Promise和async/await概念的文章，但仍无法理解如下代码的执行逻辑及输出结果，希望有人能为我解惑。

原代码 #

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);

实际输出 #

1 3 4 2

预期输出 #

1 3 2 4

我原本以为上述async/await代码会被转换为如下Promise写法：

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);
  });

但这段代码的输出是1 3 2 4，和async/await版本的输出不一致，这说明我误解了Promise与async/await的转换逻辑。

之后我尝试将第二个Promise嵌套在第一个的回调中，写法如下：

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);
  });
});

它的输出是1 3 4 2，这让我更加困惑。

内容的提问来源于stack exchange，提问作者Rick