ネストされた Promise の実行順序

Question

ネストされた Promise について読んでいて、チュートリアルでこのコーディングの課題に遭遇しました。このコードの実行順序を説明できる人はいますか?

new Promise((resolve) => {
    新しい約束((res) => {
        console.log("c");
        解決(3);
        レス(2);
    }).then((応答) => console.log(応答))
}).then((res) => console.log(res));

このコードを実行すると、出力は次のようになりました。

c
2
3

しかし、私は出力が次のようになると予想していました:

c
3
2

外側の Promise が最初に解決され、その後内側の Promise が解決されるためです。

Answer 1

ニコラスの答えに加えて、識別子「res」の繰り返しの使用によって行き詰まる可能性があります。 Promise の内部での最初の使用はコールバック関数として行われ、値 2 を Promise に返します。 最後の行の 2 番目の使用は別のスコープにあり、外側の Promise の .then() メソッドのパラメーター名として使用されます。 内容を明確にするために、最後の行の「res」を「outerPromiseResult」に置き換えると役立つかもしれません。

Answer 2

要するに、.then を呼び出す順序が原因です。

リーリー

上記のコードでは、外部コンストラクターを入力し、外部関数をすぐに呼び出します。次に、内部 Promise を作成し、内部関数を呼び出します。内側の関数は「c」を記録し、外側の Promise を 3 に解決し、次に内側の Promise を 2 に解決します。

つまり、この時点で解決された Promise は 2 つありますが、それらを使用しようとするコードはありません。

リーリー

内部 Promise の構築が完了したら、内部 Promise で .then を呼び出します。 Promise が解決されたため、実行するマイクロタスクがキューに入れられます。

リーリー

外部 Promise の構築が完了したら、外部 Promise で .then を呼び出します。 Promise が解決されたため、実行するマイクロタスクがキューに入れられます。

これで、すべての同期コードの実行が完了しました。呼び出しスタックは空になり、マイクロタスクが実行を開始します。これらは先入れ先出しの順序で実行されるため、内部の Promise に関連するマイクロタスクが最初に実行され、レコード 2 になります。次に、残りのマイクロタスクを実行し、3 を記録します。