ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript の Promise.all メソッドと Promise.race メソッドの概要 (コード付き)

JavaScript の Promise.all メソッドと Promise.race メソッドの概要 (コード付き)

不言
リリース: 2019-03-15 14:10:10
転載
3621 人が閲覧しました

この記事では、JavaScript の Promise.all メソッドと Promise.race メソッドの紹介 (コード付き) を紹介します。これには一定の参考値があります。必要な友人は参照できます。お役に立てば幸いです。help 。

Promise.all() メソッドは、Promise オブジェクトまたは共通の値を含む配列 (または他の反復可能なオブジェクト) をパラメーターとして受け取り、Promise を返します。すべての Promise オブジェクトが解決されると、すべての解決値が Promise.all()solve の結果として配列として使用されます。 Promise の 1 つが拒否された場合、最初の拒否の値が Promise.all() の拒否結果として直ちに使用されます。

実際のアプリケーションでは、複数のインターフェイスからデータを取得し、すべてのデータが到着した後に特定の操作を実行する必要がある場合は、Promise.all() を使用できます。

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
Promise.all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]
ログイン後にコピー

次のコード実装では、すべての Promise オブジェクトが解決されたことを確認して結果を返すカウンターが必要です。返された結果を順番に記録するには配列が必要です。 for (var i = 0; i < iterable[i]; i ) のようなメソッドを使用してトラバースする場合、クロージャが変数参照でしか渡せないという問題を回避するために、self の層をネストする必要があります。 -関数の実行。ここで for...in ループが使用されているのは、関数がデータ構造 Set などの配列以外の他の反復可能なオブジェクトをサポートできるようにするためです。

const all = function (iterable) {
  return new Promise(function (resolve, reject) {
    let count = 0, ans = new Array(count)
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === 'object' && typeof v.then === 'function') {
        v.then(function (res) {
          ans[i] = res
          if (--count === 0) resolve(ans)
        }, reject)
        count++
      } else {
        ans[i] = v
      }
    }
  })
}

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]
ログイン後にコピー

Promise.all() と同様に、Promise.race() メソッドは、Promise オブジェクトまたは共通の値を含む配列 (または他の反復可能なオブジェクト) をパラメーターとして受け取り、Promise を返します。 Promise オブジェクトの 1 つが解決されると、解決された値は Promise.race() 解決の結果としてすぐに使用されます。オブジェクトの 1 つが拒否した場合、Promise.race もすぐに拒否します。

実際のアプリケーションでは、複数のインターフェースから同じデータが取得できる場合、先に到着したインターフェースデータを先に使用してPromise.race()を使用することができ、所要時間は最速と同等になります。その中の 1 つがインターフェイスです。コードは次のとおりです:

const race = function (iterable) {
  return new Promise(function (resolve, reject) {
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === 'object' && typeof v.then === 'function') {
        v.then(resolve, reject)
      } else {
        resolve(v)
      }
    }
  })
}
const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = new Promise(function (resolve) { setTimeout(resolve, 100, 2) })
race([p1, p2]).then(function (res) { console.log(res) }) // 2
ログイン後にコピー

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

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