javascriptのPromiseの実行順序が分からない

Question

前提・実現したいこと

現在、JavaScriptの非同期処理を理解する必要があるため

• コールバック
• Promise
• async/await

について勉強していました。

しかし、Promiseの挙動について不可解な点があります。

発生している問題

function asyncFunc(val) {
    console.log("first");
    return new Promise((resolve, reject) => {
        console.log("second");
        resolve(val * 2);
    })
}


asyncFunc(50)
    .then((val) => {
        console.log(val);
    });

console.log('here');

以上のコードをブラウザで実行したときに、実行順序が

first
second
here
100

のようになります。

個人的には、

first
here
second
100

の順番で出力されると考えていました。

上記のような順番であると考える理由

JavaScriptの勉強内で

ChromeのようなWebブラウザは

v8(ブラウザ内のjs実行エンジン)

• シングルスレッド
• スタック(関数・処理を積んでいく)

Web API

• DOM
• Timer
• setTimeout

キュー

• もしv8のスタックが空なら、非同期処理が終わった部分をスタックに戻す

という３構成であると考えていました。

例えば、setTimeout(f)を実行すると
まずスタックに入り
その後setTimeoutなので、Web　APIだ！　とブラウザが代わりに実行して（タイマーを測って）
そして、タイマーの時間になったら、キューに移し、スタックが空いている瞬間があったらfをスタックに入れて実行する。
という認識です。

そのため、上記のコードを実行すると

1. asyncFuncをスタックに積む
2. asyncFuncを解析すると、console.log("first")があるので実行する。
3. return new Promiseなので、WebAPIもしくはキューに中身を打ち込む。

(Promiseは、resolve, rejectがなされるまで内部状態が変わらないので、おそらくWebAPI・キューに積まれる)

1. console.log("here")を実行する。
2. スタックが空いたので、Promise内を実行し、まずsecondを出力する。
3. resolveを実行し、FulFilled状態になりthenメソッドが呼ばれる。
4. thenメソッド内のconsole.log(val)をスタックに積んで実行する。

という流れになると想定していました。

しかし、実際の実行順序は
thenメソッドだけが後回しでそれ以外が先に実行されていました。

これはどういう実行順序、またはPromiseの仕組みなのでしょうか？

よろしくお願いいたします。

Answer 1

これはどういう実行順序、またはPromiseの仕組みなのでしょうか？

よくある勘違いですが、new Promiseの引数に渡した関数は同期的に実行されます。

executor 関数（引用者注：new Promiseの引数となる関数）は resolve 関数と reject 関数が渡されて Promise が実装されるとすぐに実行されます (Promise コンストラクターがオブジェクトを返すよりも前に executor は実行されます)。 ―MDNより

Comments

[ganariya]

まだ飲み込めていないのですが、new Promiseのexecuter関数が同期的に実行されるということは
上記のコードでは
console.log("second")はすぐに実行されて
**resolve(val*2)**のみが、キューに積まれるのでしょうか？

また、同期的に実行するということは、Promiseは正確には非同期処理ではないのでしょうか？

[maisumakun]

> console.log("second")はすぐに実行されてresolve(val*2)のみが、キューに積まれるのでしょうか？

いえ、このコードの場合、resolveも同期的に実行されます。.thenに与えた関数は（同期的にresolveされようが）常に非同期実行となるようになっています。

> また、同期的に実行するということは、Promiseは正確には非同期処理ではないのでしょうか？

new Promise()に与える関数は、Promiseの初期化用です。非同期実行が始まる前の段階です。

[ganariya]

ご回答ありがとうございます！
Promise内はすべて基本的には同期処理で、
thenやcatchのみが非同期に実行される。
よって、then()内のconsole.log(val)のみが最後に実行されて
その前にconsole.log(here)が実行されている
というのであっていますでしょうか？

Answer 2

asyncFuncがasyncになっていなからでは？

async function asyncFunc(val) {
  await console.log("first");
  return new Promise((resolve, reject) => {
    console.log("second");
    resolve(val * 2);
  });
}

全体をちゃんと書くと

const asyncFunc=async val=>{
  await console.log("first");
  return new Promise(resolve=>{
    console.log("second");
    resolve(val * 2);
  });
};
asyncFunc(50).then(console.log);
console.log('here');

Comments

[ganariya]

asyncをつけると必ずPromiseが帰る、というものですね！
このコードだと

まずasyncFunc(50)を呼び、console.log("first")を呼ぶまで待つ。
その後に、'here'が何故か出力される（ここが違和感がして、先にProimise内は実行されないのでしょうか？）
そして、Promise内のsecond, resolveを実行し、
最後にthen(val => console.log(val))を実行する流れでしょうか？

（先にhereが実行されるのが違和感がします･･･ return new Promiseは、Web APIまたはキューに積まれているのでしょうか？）

[yambejp]

考え方的にはasync設定したasyncFuncのawaitが入った時点で
並行処理のhereが走るという認識でよいのでは？
async設定していないasyncFuncのconsoleは
resolveされるまでは同期処理で動く