JavaScript Promise .then() ハンドラーはいつ相互に関連して実行されますか?

JavaScript Promise の実行順序を理解する

JavaScript の Promise は、コードが特定のイベントまたは Promise のたびに実行される非同期プログラミング モデルを提供します。 、満たされています。ただし、複数の Promise を扱う場合、予期しない動作を避けるために実行順序を理解することが不可欠です。

次のコード スニペットを検討してください。

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);

実行すると、次のことが観察されます。出力順序:

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

実行順序を理解する

1. Promise は非同期的に解決されます:
   Promise は独立して解決されます現在の実行スレッド。これは、現在のスレッドの終了後に .then() ハンドラーが非同期で呼び出されることを意味します。
2. キューでの実行の約束:
   .then() ハンドラーは、前述のハンドラーの後に実行されるようにスケジュールされています。ハンドラーが完了します。これらは基本的にキューに入れられているため、1、2 "A"、および 3 "B" がこの順序で出力されます。
3. 内部プロミスが独立したチェーンを作成:
   プロミスが作成されましたPromise.resolve('C') や Promise.resolve('D') などのネストされた .then() ハンドラー内で、新しい独立した Promise チェーンを作成します。これらの内部チェーンは本質的に外部チェーンと同期しません。
4. 実行順序は決定的ではありません:
   これらの独立したチェーンの実行順序は保証されません。この場合、Promise エンジンは、行 6 と 7 の .then() ハンドラーを実行する前に、行 5 と 12 の .then() ハンドラーを実行することを選択します。

Recommendations

特定の実行順序を確保するには、非同期の Promise チェーンの作成を避け、代わりに Promise を順次リンクすることに依存します。以下に示すように、内部の .then() ハンドラーから Promise を返し、親 Promise と連鎖させます。

Promise.resolve('A').then(function (a) {
    console.log(2, a);
    return 'B';
}).then(function (a) {
    var p = Promise.resolve('C').then(function (a) {
        console.log(7, a);
    }).then(function (a) {
        console.log(8, a);
    });
    console.log(3, a);
    return p; // Link the inner promise to the parent chain
}).then(function (a) {
    var p = Promise.resolve('D').then(function (a) {
        console.log(9, a);
    }).then(function (a) {
        console.log(10, a);
    });
    console.log(4, a);
    return p; // Link the inner promise to the parent chain
}).then(function (a) {
    console.log(5, a);
});

console.log(1);

setTimeout(function () {
    console.log(6)
}, 0);

このアプローチでは、実行順序は完全に決定的になります: 1、2 "A"、3 " B"、7 "C"、8 未定義、4 未定義、9 "D"、10 未定義、5 未定義、6.

以上がJavaScript Promise .then() ハンドラーはいつ相互に関連して実行されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。