自作でpromiseを作って挙動をテスト。6パターンのコードの違いを説明できますか？

Question

課題の背景

開発の際、promiseの挙動がどうしても分からず、自分でpromiseを作って挙動をテストしました。

質問内容

パターン①③：なぜこの実行結果になるかわかりません。
パターン④⑤：awaitの位置による違いはなんですか？
パターン⑥：もっといい書き方ありますか？

6つのコード

共通部分

const hoge = [1, 2, 3, 4, 5];

const myPromise = () => {
  return new Promise((resolve) => {
    resolve("foo");
  });
};

console.log("start");

/// 該当箇所

console.log("end");

パターン①

hoge.forEach(async (element) => {
  await myPromise().then((res) => {
    console.log(res);
  });
  console.log(element);
});

// 実行結果
start
end
foo
foo
foo
foo
foo
1
2
3
4
5

// 意図した実行結果
start
foo
1
foo
2
foo
3
foo
4
foo
5
end

パターン②

for (const element of hoge) {
  myPromise().then((res) => {
    console.log(res);
  });
  console.log(element);
}

// 実行結果（意図通り）
start
1
2
3
4
5
end
foo
foo
foo
foo
foo

パターン③

for (const element of hoge) {
  myPromise()
    .then((res) => {
      console.log(res);
    })
    .then(() => {
      console.log(element);
    });
}

// 実行結果
start
end
foo
foo
foo
foo
foo
1
2
3
4
5

// 意図した実行結果
start
end
foo
1
foo
2
foo
3
foo
4
foo
5

パターン④

(async () => {
  for (const element of hoge) {
    await myPromise()
      .then((res) => {
        console.log(res);
      })
      .then(() => {
        console.log(element);
      });
  }
})();

// 実行結果（意図通り?コールバック関数?）
start
end
foo
1
foo
2
foo
3
foo
4
foo
5

パターン⑤

(async () => {
  for await (const element of hoge) {
    myPromise()
      .then((res) => {
        console.log(res);
      })
      .then(() => {
        console.log(element);
      });
  }
})();

// 実行結果（パターン④との違いが分からない）
start
end
foo
1
foo
2
foo
3
foo
4
foo
5

パターン⑥

const fuga = async () => {
  for (const element of hoge) {
    await myPromise()
      .then((res) => {
        console.log(res);
      })
      .then(() => {
        console.log(element);
      });
  }
};

fuga().then(() => {
  console.log("end");
});

// 実行結果（一番欲しかった結果）
start
foo
1
foo
2
foo
3
foo
4
foo
5
end

実行環境

node.js v12

Answer 1

パターン①では、forEachのコールバック関数が何を返そうがそれは無視されますので、繰り返しごとの動作は、互いに関連を持たないものとなります。

結果、各繰り返し内での「foo→数字」については順番が保証されますが、それぞれの重なり合いについては何も保証されません。foo→foo→1→foo→2→3のようになっても文句は言えません。

そして、forEachがコールバック関数の結果を読まないということは、中身の関数がasyncであろうが単に非同期に実行されるだけとなり、endよりあとの実行となります。

パターン③も同様に、別個に実行された非同期動作どうしの順番関係を考えてはいけない場面です（なにかの都合で変わるかもしれないと考えたほうが安全です）。

パターン5のfor awaitはそれで1つの構文です（MDN）。この場合awaitはiterableからの値取り出しにかかるものなので、単なる配列をfor awaitした場合には、単にfor-ofで書いたのと結果は変わりません。

Comments

[maisumakun]

> パターン⑥：もっといい書き方ありますか？

順番重視であれば、同期的に処理してしまうという方がわかりやすいかもしれません。Promise.allを使えば、Promiseの配列などから結果の配列を得ることができます。

Answer 2

こんにちは。

以前の回答にも書きましたが、非同期処理の順番については、イベントループとマイクロタスクの理解が必要です。
マイクロタスクはキューになっていて、FIFO（先入先出）で処理されます。

簡単のために極めて大雑把に書きますが、こういうことだと思います。

---

①について、

forEachの1周目は、async()=>{...}【1】をマイクロタスクに積みます。

async()=>{...}【1】

forEachの2周目は、async()=>{...}【2】をマイクロタスクに積みます。

async()=>{...}【1】
async()=>{...}【2】

...

forEachの5周目は、async()=>{...}【5】をマイクロタスクに積みます。

async()=>{...}【1】
...
async()=>{...}【5】

イベントループが周り、マイクロタスクの処理をします。

async()=>{...}【1】の処理をします。awaitがあるので、myPromise()【1】をマイクロタスクに積み、停止します。

async()=>{...}【2】
...
async()=>{...}【5】
myPromise()【1】

async()=>{...}【2】の処理をします。awaitがあるので、myPromise()【2】をマイクロタスクに積み、停止します。

async()=>{...}【3】
...
async()=>{...}【5】
myPromise()【1】
myPromise()【2】

...

async()=>{...}【5】の処理をします。awaitがあるので、myPromise()【5】をマイクロタスクに積み、停止します。

myPromise()【1】
...
myPromise()【5】

解決されたmyPromise()【1】の処理をします。.then(...)【1】をマイクロタスクに積みます。

myPromise()【2】
...
myPromise()【5】
.then(...)【1】

...

解決されたmyPromise()【5】の処理をします。.then(...)【5】をマイクロタスクに積みます。

.then(...)【1】
...
.then(...)【5】

解決された.then(...)【1】の処理をします。コンソールに解決された値fooを出力し、Promise【1】をマイクロタスクに積みます。

.then(...)【2】
...
.then(...)【5】
Promise【1】

...

解決された.then(...)【5】の処理をします。コンソールに解決された値fooを出力し、Promise【5】をマイクロタスクに積みます。

Promise【1】
...
Promise【5】

Promise【1】が解決されたので、停止していたasync()=>{...}【1】の処理を再開します。コンソールにelementを出力し、undefinedで解決して終わります。

Promise【2】
...
Promise【5】

...

という感じです。

繰り返しになりますが、かなり大雑把に説明していますので、細かい間違いが含まれています。
あくまでイメージとしてとらえていただいて、この説明を鵜呑みにしないでください。

---

蛇足ですが、

const myPromise = () => {
  return new Promise((resolve) => {
    setTimeout(()=>resolve("foo"), 0);
  });
};

として①を実行すると、より一層悩みが深まると思いますので、ぜひお試しください。

Answer 3

いつかえってくるか分からないpromiseを順番に処理するならPromise.allした方がいいかも

const hoge = [1, 2, 3, 4, 5];
const myPromise = () => {
  return new Promise((resolve) => {
    resolve("foo");
  });
};
(async()=>{
  console.log("start");
  const data=await Promise.all(hoge.map(x=>myPromise()));
  hoge.forEach((x,y)=>{
    console.log(data[y]);
    console.log(x);
  });
  console.log("end");
})();