Promise.allSettled() の使用方法の詳細な分析

Promise.allSettled() の使用方法?次の記事では、Promise.allSettled() について理解し、その使用方法を紹介します。

Promise.allSettled() このメソッドは、指定されたすべての Promise が fulfilled または rejected# された場合に値を返します。 ## の後の promise にはオブジェクト配列が伴い、各オブジェクトは対応する Promise の結果を表します。

次に、

Promise.allSettled() の仕組みを見てみましょう。

1. Promise.allSettled()

Promise.allSettled() は、独立した非同期操作を並行して実行し、結果を収集するために使用できます。これらの操作の結果。

この関数は、

promise (通常は反復可能なオブジェクト) の配列をパラメータとして受け入れます:

const statusesPromise = Promise.allSettled(promises);

When all input

promises are Fulled または rejected、statusesPromise はステータス

• { status: 'fulfilled'、 value: value } — 対応する Promise が fulfilled

• または

  {status: 'rejected'、reason:reason }## の場合# 対応する Promise が 拒否された場合は、

すべての Promise を解決した後、

then

を使用できます。ステータスを抽出する構文: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">statusesPromise.then(statuses =&gt; { statuses; // [{ status: &amp;#39;...&amp;#39;, value: &amp;#39;...&amp;#39; }, ...] });</pre><div class="contentsignin">ログイン後にコピー</div></div> または

async/await

を使用します。 構文: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="hljs language-awk">const statuses = await statusesPromise; statuses; // [{ status: &amp;#39;...&amp;#39;, value: &amp;#39;...&amp;#39; }, ...]</pre><div class="contentsignin">ログイン後にコピー</div></div>

2. 果物と野菜を取得します

Promise.allSettle()

について詳しく説明する前に、2 つの単純な helper 関数を定義しましょう。 最初に、

resolveTimeout(value, late)

は Promise を返します。これは、 delay 時間が経過した後に value で実装されます <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">function resolveTimeout(value, delay) { return new Promise( resolve =&gt; setTimeout(() =&gt; resolve(value), delay) ); }</pre><div class="contentsignin">ログイン後にコピー</div></div> Second,

rejectTimeout(reason, late)

- reason を使用して、lay 時間後に拒否された Promise を返します。 最後に、これらのヘルパー関数を使用して、

promise.allsettle()

を実験します。

2.1 すべての約束は果たされました

私たちはまた、野菜や果物を買うために地元の食料品店を訪れます。各リストへのアクセスは非同期操作です:

const statusesPromise = Promise.allSettled([
  resolveTimeout(['potatoes', 'tomatoes'], 1000),
  resolveTimeout(['oranges', 'apples'], 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },
//   { status: 'fulfilled', value: ['oranges', 'apples'] }
// ]

オンライン例: https://codesandbox.io/s/all-resolved-yyc0l?file=/src/index.js

Promise.allSettled([...])

Promise statusesPromise を返します。これは、野菜と果物が解決された直後に、1 秒以内に解決され、並行して解決されます。 。

statusesPromise

ステータスを含む配列として解決します。

配列の最初の項目には、野菜の完了ステータスが含まれます:
• ステータス: 'fulfilled'、値: ['ジャガイモ', 'トマト'] }

同様に、2 番目の項目は果物の完了ステータスです:
• { status: 'fulfilled', value: ['oranges', 'apples'] }

2.2 約束が拒否される

食料品店に果物がなくなったと想像してください。この場合、果物の約束を拒否します。

promise.allsettle()

この場合、どのように機能しますか?<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const statusesPromise = Promise.allSettled([ resolveTimeout([&amp;#39;potatoes&amp;#39;, &amp;#39;tomatoes&amp;#39;], 1000), rejectTimeout(new Error(&amp;#39;Out of fruits!&amp;#39;), 1000) ]); // wait... const statuses = await statusesPromise; // after 1 second console.log(statuses); // [ // { status: &amp;#39;fulfilled&amp;#39;, value: [&amp;#39;potatoes&amp;#39;, &amp;#39;tomatoes&amp;#39;] }, // { status: &amp;#39;rejected&amp;#39;, reason: Error(&amp;#39;Out of fruits!&amp;#39;) } // ]</pre><div class="contentsignin">ログイン後にコピー</div></div>

オンラインの例: https://codesandbox.io/s/one - requested-ij3uo?file=/src/index.js

Promise.allSettled([...])

返される Promise は 1 秒以内に返されます次に、ステータス配列に解析されます:

配列の最初の項目、野菜
• promise

  解析成功: { status: 'fulfilled', value : [' ジャガイモ', 'トマト'] }

  ##2 番目の項目は、果物の約束が拒否されたため、拒否ステータスです:
{ ステータス: '拒否されました'、理由: Error('Out of Fruits') }

• 入力配列の 2 番目の Promise が拒否された場合でも、
statusesPromise

はステータスを正常に解析します。配列。

2.3 すべての約束が拒否される

食料品店の野菜や果物が売り切れたらどうなるでしょうか?この場合、両方の約束は拒否されます。

const statusesPromise = Promise.allSettled([
  rejectTimeout(new Error('Out of vegetables!'), 1000),
  rejectTimeout(new Error('Out of fruits!'), 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'rejected', reason: Error('Out of vegetables!')  },
//   { status: 'rejected', reason: Error('Out of fruits!') }
// ]

オンライン例: https://codesandbox.io/s/all-rejected-z4jee?file=/src/index.js

この場合,

statusesPromise

は引き続きステータス配列に正常に解決されます。ただし、配列には拒否された Promise のステータスが含まれます。

3. 概要

Promise.allSettled(promises)

Promise を並行して実行し、ステータス (履行または拒否) を 1 つに収集できます。集約配列内。

Promise.allSettled(...)

一部の非同期操作が失敗する可能性がある場合でも、並列かつ独立した非同期操作を実行してすべての結果を収集する必要がある場合に効果的です。

英語の元のアドレス: https://dmitripavlutin.com/promise-all-settled/

著者: Dmitri Pavlutin

その他のプログラミング関連知識については、プログラミング ビデオ をご覧ください。 ！

以上がPromise.allSettled() の使用方法の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。