JavaScript での Promise.all() メソッドと Promise.allSettled() メソッドの使用

このチュートリアルでは、JavaScript で Promise await を使用する方法を説明します。

このチュートリアルでは、Promise.all() メソッドと Promise.allSettled() メソッドについて、およびそれらを使用して複数の Promise を処理する方法について説明します。

Promise.all() メソッドを使用します

Promise オブジェクトには、then()、catch()、finally() という 3 つの便利なメソッドがあります。 Promise の完了時にコールバック メソッドを実行するために使用されます。 p>

Promise.all() このメソッドは静的メソッドです。これは、メソッドがクラス全体に属し、クラスの特定のインスタンスにバインドされていないことを意味します。 Promise の反復可能値を入力として受け取り、単一の Promise オブジェクトを返します。

前に述べたように、

Promise.all() メソッドは新しい Promise を返します。このメソッドに渡されたすべての Promise が正常に解決された場合、この新しい Promise は決定された Promise 値の配列に解決されます。渡された Promise の 1 つが拒否されると、この新しい Promise も拒否されます。

すべての約束は正常に解決されました

以下は、すべての Promise が正常に解決される

Promise.all() メソッドの例です。 リーリー Promise.all()

メソッドを呼び出す前のステートメントは、19:32:06 に記録されました。さらに、

promise_c という 3 番目の Promise は解決に最も時間がかかり、4 秒後に解決されます。これは、all() メソッドを呼び出して返された Promise も解決に 4 秒かかることを意味します。コールバック関数を then() メソッドに渡すことで、解決に 4 秒かかるかどうかを確認できます。 ここで注意すべきもう 1 つの重要な点は、返された完了値の配列には、Promise を Promise.all()

メソッドに渡したのと同じ順序で値が含まれていることです。

promise_b という名前の Promise は最も速く解決され、わずか 2 秒かかります。ただし、解析された値は返された配列の 2 番目の位置にあります。これは、Promise を Promise.all() メソッドに渡した場所と一致します。 この順序を維持すると、状況によっては非常に役立ちます。たとえば、10 の異なる Promise を使用して 10 の異なる都市の天気情報を取得しているとします。これらすべての問題が同時に解決されることはなく、解決される順序を事前に知ることは不可能です。ただし、Promise が渡された順序でデータが返されることがわかっている場合は、後の操作にデータを正しく割り当てることができます。

約束が拒否されました

次に、拒否された Promise の 1 つの例を示します。 リーリー

同様に、

all()

メソッドを呼び出す前のステートメントは 20:03:43 に記録されます。しかし、2 番目の約束

promise_b

は今回は拒否に終わりました。 promise_b が 2 秒後に拒否されたことがわかります。これは、all() メソッドによって返された Promise も、promise_b と同じエラーで 2 秒後に拒否される必要があることを意味します。出力から、これがまさに起こっていることは明らかです。 await キーワードとともに使用します

await キーワードは、次のステップに進む前に Promise が解決されるのを待つために使用されることをすでにご存知かもしれません。

all()

メソッドが Promise を返すこともわかります。これは、Promise.all() メソッドの呼び出しとともに await を使用できることを意味します。 覚えておくべき唯一のことは、await は非同期関数とモジュール内でのみ機能するため、次のように非同期関数内でコードをラップする必要があるということです。 リーリー

今回は、提供されたデータと期間に基づいて Promise を作成する

create_promise() という関数を定義します。非同期 result_from_promises()

関数は、

await キーワードを使用して Promise が解決されるのを待ちます。 Promise.allSettled() メソッドを使用します すべての Promise が正常に解決された後にのみ続行したい場合は、

Promise.all()

メソッドを使用するのが合理的です。これは、ゲーム アセットをロードする場合などに便利です。 しかし、さまざまな都市の天気に関する情報を取得しているとします。この場合、データ取得に成功した全都市の気象情報を出力し、データ取得に失敗した場合にはエラーメッセージを出力することができます。

この場合、

Promise.allSettled() メソッドが最適に機能します。このメソッドは、渡されたすべてのコミットメントが解決または拒否によって解決されるまで待機します。このメソッドによって返される Promise には、各 Promise の結果に関する情報を含むオブジェクトの配列が含まれます。

function create_promise(city) {
  let random_number = Math.random();
  
  let duration = Math.floor(Math.random()*5)*1000;

  return new Promise((resolve, reject) => {
    if (random_number < 0.8) {
      setTimeout(() => {
        resolve(`Show weather in ${city}`);
      }, duration);
    } else {
      setTimeout(() => {
        reject(`Data unavailable for ${city}`);
      }, duration);
    }
  });
}

const promise_a = create_promise("Delhi");
const promise_b = create_promise("London");
const promise_c = create_promise("Sydney");

const my_promises = [create_promise("Delhi"), create_promise("London"), create_promise("Sydney"), create_promise("Rome"), create_promise("Las Vegas")];

async function result_from_promises(promises) {
  let loading_status = await Promise.allSettled(promises);
  console.log(loading_status);
}

result_from_promises(my_promises);

/* Outputs

[
  {
    "status": "fulfilled",
    "value": "Show weather in Delhi"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in London"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in Sydney"
  },
  {
    "status": "rejected",
    "reason": "Data unavailable for Rome"
  },
  {
    "status": "fulfilled",
    "value": "Show weather in Las Vegas"
  }
]

*/

如您所见，数组中的每个对象都包含一个 status 属性，让我们知道承诺是否已实现或被拒绝。在履行承诺的情况下，它包含 value 属性中的解析值。在被拒绝的 Promise 的情况下，它在 reason 属性中包含拒绝的原因。

最终想法

我们了解了 Promise 类的两个有用方法，它们可以让您同时处理多个 Promise。当您想要在其中一个 Promise 被拒绝后立即停止等待其他 Promise 解决时， Promise.all() 方法很有用。当您想要等待所有承诺解决时，无论其解决或拒绝状态如何， Promise.allSettled() 方法非常有用。

以上がJavaScript での Promise.all() メソッドと Promise.allSettled() メソッドの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。