順番に処理することができない

Question

すみません、教えてください。
forEachやmapを使って順番に処理を行う必要があるのですがなかなかうまくいきません。

求める流れは、1番の処理が完了して2番の処理が流れるようにしたいのですが
実際には1番と2番の処理が同時に実行されているような結果になります。

// 処理するデータ
data =  [
  ["1番"],
  ["2番"]
];

main()

// メイン処理
async function main() {

  //順番に処理
  await Promise.all(data.map(async i => {
    console.log(i[0]+"の処理開始！")
    const result = await execute(i)
    console.log(result)
  })),

  // 終了通知
  console.log("全てのmain()処理完了！")
}

// 同期処理
async function execute(i) {
  return new Promise((resolve, reject) => {
    setTimeout(()=>{
      resolve(i[0]+"の処理が今終わったよ！");
    }, 1000);
  });
}

以下の実行結果になってしまいます。

1番の処理開始！

2番の処理開始！
1番の処理が今終わったよ！
2番の処理が今終わったよ！
全てのmain()処理完了！

【理想】

1番の処理開始！

1番の処理が今終わったよ！
2番の処理開始！
2番の処理が今終わったよ！
全てのmain()処理完了！

new promiseを使ってresolveを待ち受けるようにもしたのですが結果は変わらず。
どのようにすれば正しく処理を行うことができますでしょうか？
（同期処理関数(execute)部分は諸事情によりsetTimeout使って疑似的に同期実行を再現しているため一切変更できないモノとします）

以下、実際に動くデモをご用意しました。
https://stackblitz.com/edit/js-kgctbu?file=index.js

大変申し訳ありませんがどなたかご教示いただけると幸いです。

Comments

[gentaro]

正直なにがやりたいのか意味がわかりませんが、「理想」に書かれている通りの結果を得たいのであればそれは直列に処理したいということでしか無いので、わざわざ非同期化する意味ないんで、素直にforEachで順に処理すりゃ良いだけでは。

Answer 1

こんな流れです

const data =  [
  ["1番"],
  ["2番"]
];
const main=async ()=>{
  for(var i=0;i<data.length;i++){
    console.log(data[i][0]+"の処理開始！");
    await execute(data[i]).then(console.log);
  };
  console.log("全てのmain()処理完了！")
}
const execute=async i=>{
  return new Promise((resolve, reject) => {
    setTimeout(()=>{
      resolve(i[0]+"の処理が今終わったよ！");
    }, 1000);
  });
}
main();

Comments

[inukujira]

ありがとうございました！完璧に求める処理を行うことができました！助かりました！

Answer 2

リンク内容
リンク内容
こんなですか？