ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript Promise の実行順序とは何ですか?

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

Patricia Arquette
リリース: 2024-10-24 11:22:02
オリジナル
961 人が閲覧しました

What Is the Order of Execution in JavaScript Promises?

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

JavaScript Promise は、非同期操作を処理する方法の 1 つです。 Promise が解決されると、現在の実行スレッドが終了した後、その .then() ハンドラーが非同期的に実行されます。これは、現在のスレッド内のすべての同期コードが .then() ハンドラーの前に実行されることを意味します。

次のコード スニペットを考えてみましょう。

<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>
ログイン後にコピー

結果このコード スニペットの部分は次のとおりです。

<code class="text">1
2 "A"
3 "B"
7 "C"
4 "B"
8 undefined
9 "D"
5 undefined
10 undefined
6</code>
ログイン後にコピー

説明

  1. 行 1: コードは、値 'A' を持つ Promise を解決することから始まります。
  2. 行 2 ~ 4: この Promise の .then() ハンドラーは、値 'A' をコンソールに記録し、値 'B' を返します。
  3. 行 5 ~ 9: 前のハンドラーによって返された Promise の .then() ハンドラーは、値「B」をコンソールに記録し、同じ値を返します。
  4. 行 10 ~ 14 : 前のハンドラーによって返された Promise の .then() ハンドラーは、値 'B' をコンソールに記録し、同じ値を返します。
  5. 行 15 ~ 19:前のハンドラーによって返された Promise の .then() ハンドラーは、値「B」をコンソールに記録し、同じ値を返します。
  6. 行 20: .then() ハンドラー前のハンドラーによって返された Promise では、値 'B' がコンソールに記録されます。
  7. 行 21: setTimeout() 関数は、遅延後に実行される関数をスケジュールするために使用されます。
  8. 行 22: console.log() 関数を使用して、値「1」をコンソールに記録します。

順序実行

このコード スニペットの実行順序は次のとおりです:

  1. 22 行目の console.log() が最初に実行され、続いて 1 行目の Promise.resolve() が実行されます。 .
  2. 2 行目の .then() ハンドラーが次に実行され、続いて 5 行目の .then() ハンドラーが実行されます。
  3. 10 行目の .then() ハンドラーが次に実行されます。
  4. 行 20 の .then() ハンドラーが次に実行されます。
  5. 行 21 の setTimeout() 関数が最後に実行されます。

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

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート