チュートリアル: JavaScript でポリフィル Promise.allSettled を最初から実装する

JavaScript では、複数の非同期操作の操作を容易にするために、ES2020 で Promise.allSettled が導入されました。 Promise が拒否されたときにショートする Promise.all とは異なり、Promise.allSettled は、成功か失敗かにかかわらず、すべての Promise から結果を確実に取得します。

このチュートリアルでは、Promise.allSettled を最初から構築することに重点を置き、独自の実装を作成する手順を説明します。また、Promise がバックグラウンドでどのように機能するかについても説明し、JavaScript を非常に強力にする非同期動作を理解するのに役立ちます。

Promise.allSettled とは何ですか?

コードの作成に入る前に、Promise.allSettled の機能を詳しく見てみましょう。

• 入力: Promise の配列。
• 出力: すべての入力 Promise が解決された (履行または拒否された) 後に解決される Promise で、各 Promise の結果を記述するオブジェクトの配列が含まれます。

配列内の各オブジェクトには以下が含まれます:

• ステータス: 「完了」または「拒否」。
• value: Promise が解決された場合は値、拒否された場合は理由。 例：

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Failure'),
  Promise.resolve('Complete')
];

Promise.allSettled(promises).then(results => {
  console.log(results);
});

出力:

[
  { status: 'fulfilled', value: 'Success' },
  { status: 'rejected', reason: 'Failure' },
  { status: 'fulfilled', value: 'Complete' }
]

この方法は、成功したか失敗したかに関係なく、すべての Promise が完了するまで待つ必要がある場合に最適です。

Promise.allSettled Yourself を実装する理由

この機能は最新のブラウザーで利用できるようになりましたが、自分で実装すると、JavaScript がどのように機能するかをより深く理解できます。さらに、ES2020 機能をネイティブにサポートしていない古い環境との互換性も保証します。

Promise.allSettled を実装するためのステップバイステップ ガイド

Promise.allSettled の動作を模倣する allSettled という名前の関数を作成します。これを段階的に構築してみましょう:

ステップ 1: ラッパー関数を作成する

関数は Promise の配列を受け取り、新しい Promise を返します。この新しい Promise は、すべての入力 Promise が解決されると解決されます (解決または拒否のいずれか)。

function allSettled(promises) {
  // This will return a new promise that resolves when all promises settle
  return new Promise((resolve) => {
    // Implementation goes here
  });
}

ステップ 2: それぞれの約束を処理する

配列内の各 Promise について、それが解決されるか拒否されるかを追跡する必要があります。各 Promise を .then() と .catch() でラップしてステータスをキャプチャします。

function allSettled(promises) {
  return new Promise((resolve) => {
    let results = [];
    let count = 0;

    promises.forEach((promise, index) => {
      // Wrap the promise with a .then() and .catch() to capture the result
      promise
        .then((value) => {
          results[index] = { status: 'fulfilled', value };
        })
        .catch((reason) => {
          results[index] = { status: 'rejected', reason };
        })
        .finally(() => {
          count++;
          // Once all promises have settled, resolve the outer promise
          if (count === promises.length) {
            resolve(results);
          }
        });
    });
  });
}

説明：

1.外側の Promise の作成:

allSettled 関数は新しい Promise を返します。この Promise は、すべての入力 Promise が解決されたときに解決されます。

2. Promise のループ:

.forEach を使用して、Promise 配列をループします。各 Promise について、.then() (解決された Promise の場合) と .catch() (拒否された Promise の場合) を使用してその結果を追跡します。

3.記録結果:

各 Promise の結果は結果配列に保存されます。 Promise が解決されると、オブジェクトには { status: 'fulfilled', value } が含まれます。拒否した場合は、{ status: 'rejected',reason } を保存します。

4.解決済みの約束を数える:

カウント変数を使用して、決済された約束の数を追跡します。 Promise が (.then() または .catch() を通じて) 終了するたびに、カウントが増加します。 count が入力配列の長さと等しくなったら、結果の配列を使用して外側の Promise を解決します。

ステップ 3: allSettled 関数をテストする

それでは、このカスタム実装をテストしてみましょう:

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Failure'),
  Promise.resolve('Complete')
];

Promise.allSettled(promises).then(results => {
  console.log(results);
});

出力:

[
  { status: 'fulfilled', value: 'Success' },
  { status: 'rejected', reason: 'Failure' },
  { status: 'fulfilled', value: 'Complete' }
]

予想どおり、この関数はすべての Promise が解決するまで待機し、結果の配列により、解決されたか拒否されたかなど、各 Promise に関する詳細情報が得られます。

約束について詳しく見る

理解を深めるために、Promise がどのように機能するかを詳しく見てみましょう。

• Promise は、非同期操作の最終的な結果を表します。 Promise が作成されると、それは保留状態になります。
• 約束には次のようなものがあります:

操作が正常に完了すると解決 (実行) されます。

操作が失敗した場合は拒否されます。

履行または拒否された場合に決済されます

then() メソッドを使用すると、Promise が解決されたときに実行される関数を指定でき、catch() メソッドを使用すると拒否を処理できます。 Final() を使用すると、Promise の解決 (成功または失敗) が重複せずに確実に処理されます。

結論

Promise.allSettled を実装することは、Promise が基本的なレベルでどのように機能するかを理解するための素晴らしい方法です。重要な点は、拒否に遭遇すると停止する Promise.all とは異なり、Promise.allSettled はすべての Promise が完了するまで待機するということです。

これを最初から実装することで、複数の非同期操作をクリーンかつ効率的な方法で処理する方法も学びました。この知識を使用して、最新の機能をネイティブにサポートしていない環境を含む、任意の JavaScript 環境で Promise を操作できるようになりました。

以上がチュートリアル: JavaScript でポリフィル Promise.allSettled を最初から実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。