awaitをPromise変数に使うかPromiseを返却する関数の実行結果に使うかで結果が変わる

Question

質問

下記のコードの関数asyncAwaitVariablesとasyncAwaitDirectの違いが謎過ぎます。
awaitをPromise変数に使うかPromiseを返却する関数の実行結果に使うかで結果が変わるのはなぜなのでしょうか。

コード

'use strict';

const start = new Date();
const callback = () => {
  const end = new Date();
  const lapseMs = end.getTime() - start.getTime();
  return `${lapseMs}ミリ秒後`;
};
const createTimeoutPromise = (ms, callback) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(callback());
    }, ms);
  });
};
const asyncAwaitVariables = async (ms, callback) => {
  const results = [];
  const promise0 = createTimeoutPromise(ms, callback);
  const promise1 = createTimeoutPromise(ms, callback);
  const promise2 = createTimeoutPromise(ms, callback);
  results.push(await promise0);
  results.push(await promise1);
  results.push(await promise2);
  console.log('asyncAwaitVariables', results);
};
const asyncAwaitDirect = async (ms, callback) => {
  const results = [];
  results.push(await createTimeoutPromise(ms, callback));
  results.push(await createTimeoutPromise(ms, callback));
  results.push(await createTimeoutPromise(ms, callback));
  console.log('asyncAwaitDirect...', results);
};
const main = () => {
  const ms = 100;
  asyncAwaitVariables(ms, callback);
  asyncAwaitDirect(ms, callback);
};
main();

出力結果

asyncAwaitVariables [ '102ミリ秒後', '104ミリ秒後', '104ミリ秒後' ]
asyncAwaitDirect... [ '104ミリ秒後', '206ミリ秒後', '306ミリ秒後' ]

Answer 1

asyncAwaitVariables は、最初の await の時点で 3つの処理が非同期並行動作しています。1番目の処理が終われば最初のawaitから復帰し、ほぼ同時に2番目も3番目も終わっていて、その後のawaitはすぐに復帰してきます。
asyncAwaitDirect は、ひとつ処理を呼び出して処理が終わるのを await で待って、2番目を実行してawaitで終わるのを待って、3番目を実行するので、順次実行です。

asyncAwaitDirect の方も、一度変数に代入してみると違いが分かると思います。

'use strict';

const start = new Date();
const callback = () => {
  const end = new Date();
  const lapseMs = end.getTime() - start.getTime();
  return `${lapseMs}ミリ秒後`;
};
const createTimeoutPromise = (ms, callback) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(callback());
    }, ms);
  });
};
const asyncAwaitVariables = async (ms, callback) => {
  const results = [];
  const promise0 = createTimeoutPromise(ms, callback);
  const promise1 = createTimeoutPromise(ms, callback);
  const promise2 = createTimeoutPromise(ms, callback);
  results.push(await promise0);
  results.push(await promise1);
  results.push(await promise2);
  console.log('asyncAwaitVariables', results);
};
const asyncAwaitDirect = async (ms, callback) => {
  const results = [];
  const promise0 = createTimeoutPromise(ms, callback);
  results.push(await promise0);
  const promise1 = createTimeoutPromise(ms, callback);
  results.push(await promise1);
  const promise2 = createTimeoutPromise(ms, callback);
  results.push(await promise2);
  console.log('asyncAwaitDirect...', results);
};
const main = () => {
  const ms = 100;
  asyncAwaitVariables(ms, callback);
  asyncAwaitDirect(ms, callback);
};
main();

asyncAwaitVariableの処理シーケンスを書いてみました。

asyncAwaitDirect の処理シーケンスを書いてみました。

実際の正確な処理の流れとは違う部分があるとは思いますが、だいたいの流れは理解できると思います。
Promiseキューの「終了」は該当Promseのresolveメソッド呼び出しのことです。

Comments

[yuzunoha123]

回答ありがとうございます！おかげで"何が起こっているのか"は分かりましたが"なぜそれが起こるのか"がわかりません><
asyncAwaitVariablesとasyncAwaitDirectの記述は等価に見えるのですが違うのでしょうか。

[shiracamus]

全然違いますよ。
const promise0 = createTimeoutPromise(ms, callback);
const promise1 = createTimeoutPromise(ms, callback);
const promise2 = createTimeoutPromise(ms, callback);
ここまでawaitしていないので、3つの処理が同時に動けます。3つのタイマーがほぼ同時にスタートします。

一方、
results.push(await createTimeoutPromise(ms, callback));
は、この処理が終わるまでawaitで待ち合わせます。
results.pushまで終わったら、次の
results.push(await createTimeoutPromise(ms, callback));
を実行します。
ひとつのタイマー処理が完全に終わってから、次のタイマーをスタートします。

[shiracamus]

処理のタイムチャートを書けばすぐ理解できると思いますが、いま移動中なので後程書いてみます。

[yuzunoha123]

ありがとうございます！！

[shiracamus]

追記しました。

[yuzunoha123]

ありがとうございました！図まで用意してくださったおかげでスッと理解できました。いくら自分で調べてもわからず、熟練の方からご教授いただけて幸いでした。