ホームページ >ウェブフロントエンド >jsチュートリアル >Promise の実行順序が JavaScript の期待と一致しないのはなぜですか?

Promise の実行順序が JavaScript の期待と一致しないのはなぜですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-25 08:01:28489ブラウズ

Why Doesn't the Order of Promise Execution Match Expectations in JavaScript?

JavaScript Promise の実行順序は何ですか?

問題:

次のスニペットは、JavaScript の使用法を示しています。

<code class="javascript">Promise.resolve('A')
  .then(function(a){console.log(2, a); return 'B';})
  .then(function(a){
     Promise.resolve('C')
       .then(function(a){console.log(7, a);})
       .then(function(a){console.log(8, a);});
     console.log(3, a);
     return a;})
  .then(function(a){
     Promise.resolve('D')
       .then(function(a){console.log(9, a);})
       .then(function(a){console.log(10, a);});
     console.log(4, a);})
  .then(function(a){
     console.log(5, a);});
console.log(1);
setTimeout(function(){console.log(6)},0);</code>

結果は、実行順序が次のとおりであることを示しています。

1
2 "A"
3 "B"
7 "C"
4 "B"
8 undefined
9 "D"
5 undefined
10 undefined
6

提起された疑問は、なぜ実行順序が 1、2 ではないのかということです。 、3、4...、そして 1、2、3、4... の期待は結果とどのように異なりますか?

答え:

コメント:

Promise を .then() コールバックから返さずに .then() ハンドラー内で実行すると、アタッチされていない新しい Promise シーケンスが作成され、どの親 Promise とも同期しません。方法。これは一般にバグとみなされ、通常は意図された動作ではないため、一部の Promise エンジンはこの問題が発生すると警告を発行します。有効な使用例は、エラーも同期も問題にならない「ファイア アンド フォーゲット」操作です。

Promise.resolve() .then() ハンドラー内の Promise は、親から独立して実行される新しい Promise チェーンを作成します。鎖。 AJAX 呼び出しなどの実際の非同期操作では、独立した切断されたプロミス チェーンの動作を予測できません。完了のタイミングは不定です。たとえば、完了の順序が不明な 4 つの AJAX 呼び出しを並行して起動します。提供されているコードでは、すべての操作が同期されており、一貫した動作が得られますが、Promise の設計目的は非同期実行であるため、これに依存すべきではありません。

概要:

  1. すべての .then() ハンドラーは、現在の実行スレッドが終了した後に非同期的に呼び出されます。この一貫性には、タイミング バグを防ぐために、Promise.resolve().then(...) などの同期的に解決される Promise が含まれます。
  2. setTimeout() ハンドラーとスケジュールされた .then() ハンドラーには指定された順序はありません。使用される実装では、保留中の setTimeout() の前に保留中の .then() ハンドラーが配置されますが、Promises/A 仕様では、setTimeout() の前後のいずれかでスケジュールを設定できます。
  3. 独立した Promise チェーンには予測可能な実行がありません。 order.
  4. 実行順序が重要な場合は、実装の詳細に依存するレースの作成を避けてください。代わりに、Promise チェーンをリンクして特定の順序を強制します。
  5. 「ファイアアンドフォーゲット」シナリオでない限り、.then() ハンドラー内に独立した Promise チェーンを作成することは避けてください。

行ごとの分析:

  1. 最初の Promise チェーンが開始され、.then() ハンドラーがアタッチされます。 Promise.resolve() は即座に解決されるため、最初の .then() ハンドラーは現在の JavaScript スレッドが終了した後に実行されるようにスケジュールされています。最初のハンドラーの後の最上位チェーンにある後続の .then() ハンドラーは、最初のハンドラーが完了した後にのみ実行されます。
  2. setTimeout() は実行スレッドの最後に実行され、タイマーがスケジュールされます。
  3. 同期実行が終了すると、イベント キューは残りのタスクを実行します。
  4. 行 1 で定義された .then() ハンドラーが実行され、「2 "A"」がログに記録されます。
  5. 後続の .then() ハンドラーが呼び出され、現在の実行スレッドの終了時に実行されるようにスケジュールされた .then() ハンドラーを使用して、新しい独立した Promise チェーンが作成されます。このハンドラーは、子チェーンの .then() ハンドラーが実行される前に '3 "B"' を出力し、子チェーンの .then() ハンドラーは '7 "C"' を出力します。
  6. その後、12 行目で定義された .then() ハンドラーが呼び出されます。再び新しい Promise チェーンが作成され、.then() ハンドラーがスケジュールされます。 '4 "B"' がこのハンドラーからログに記録されます。
  7. 子チェーンからスケジュールされた .then() ハンドラーが実行され、'8 未定義' が出力されます。
  8. .then() ハンドラー19 行目で定義された関数がその後呼び出され、別の独立した Promise チェーンが作成され、.then() ハンドラーがスケジュールされます。このハンドラーから「5 未定義」が出力されます。
  9. 最後に、15 行目で定義された .then() ハンドラーが呼び出され、「10 未定義」が出力されます。
  10. setTimeout() が実行されます。 last.

結論:

Promise.resolve() に特定の順序がないことは、.then() ハンドラー内での Promise の実行と同様に、さまざまなエンジンの .then() ハンドラー スケジューリングと setTimeout() の不確定性から、Promise の連鎖を通じて実行順序を制御することの重要性が強調されます。

以上がPromise の実行順序が JavaScript の期待と一致しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。