BinaryDevelop
  1. ホーム
  2. ジャバスクリプト

[解決済み】await Promise.all()と複数awaitの違いって何？

2022-04-16 18:38:48

質問

との違いはあるのでしょうか？ 

const [result1, result2] = await Promise.all([task1(), task2()]);

そして 

const t1 = task1();
const t2 = task2();

const result1 = await t1;
const result2 = await t2;

そして 

const [t1, t2] = [task1(), task2()];
const [result1, result2] = [await t1, await t2];

解決方法は？

<ブロッククオート

備考 :

この回答は await を直列に並べるのと Promise.all . 必ずお読みください。 エラー処理に関するより重要な違いもカバーした @mikep の包括的な回答です。 .

この回答では、いくつかのメソッドを例に挙げて説明します。

  • res(ms) は、ミリ秒の整数を受け取り、そのミリ秒後に解決するプロミスを返す関数です。
  • rej(ms) は、ミリ秒の整数を受け取り、そのミリ秒後に拒否する約束を返す関数です。

呼び出し res はタイマーを開始します。使用方法 Promise.all を実行すると、すべての遅延が終了した後に解決されますが、これらは同時に実行されることを覚えておいてください。

<サブ 例1 
const data = await Promise.all([res(3000), res(2000), res(1000)])
//                              ^^^^^^^^^  ^^^^^^^^^  ^^^^^^^^^
//                               delay 1    delay 2    delay 3
//
// ms ------1---------2---------3
// =============================O delay 1
// ===================O           delay 2
// =========O                     delay 3
//
// =============================O Promise.all



async function example() {
  const start = Date.now()
  let i = 0
  function res(n) {
    const id = ++i
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
        console.log(`res #${id} called after ${n} milliseconds`, Date.now() - start)
      }, n)
    })
  }

  const data = await Promise.all([res(3000), res(2000), res(1000)])
  console.log(`Promise.all finished`, Date.now() - start)
}

example()

これは、以下のことを意味します。 Promise.all は3秒後に内側の約束からのデータで解決します。

しかし Promise.all は、quot;fail fast"動作があります。 :

<サブ 例2 
const data = await Promise.all([res(3000), res(2000), rej(1000)])
//                              ^^^^^^^^^  ^^^^^^^^^  ^^^^^^^^^
//                               delay 1    delay 2    delay 3
//
// ms ------1---------2---------3
// =============================O delay 1
// ===================O           delay 2
// =========X                     delay 3
//
// =========X                     Promise.all



async function example() {
  const start = Date.now()
  let i = 0
  function res(n) {
    const id = ++i
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
        console.log(`res #${id} called after ${n} milliseconds`, Date.now() - start)
      }, n)
    })
  }
  
  function rej(n) {
    const id = ++i
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject()
        console.log(`rej #${id} called after ${n} milliseconds`, Date.now() - start)
      }, n)
    })
  }
  
  try {
    const data = await Promise.all([res(3000), res(2000), rej(1000)])
  } catch (error) {
    console.log(`Promise.all finished`, Date.now() - start)
  }
}

example()

を使用する場合 async-await の代わりに、各プロミスが順次解決するのを待つ必要があり、効率が悪くなる可能性があります。

<サブ 例3 
const delay1 = res(3000)
const delay2 = res(2000)
const delay3 = rej(1000)

const data1 = await delay1
const data2 = await delay2
const data3 = await delay3

// ms ------1---------2---------3
// =============================O delay 1
// ===================O           delay 2
// =========X                     delay 3
//
// =============================X await



async function example() {
  const start = Date.now()
  let i = 0
  function res(n) {
    const id = ++i
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
        console.log(`res #${id} called after ${n} milliseconds`, Date.now() - start)
      }, n)
    })
  }
  
  function rej(n) {
    const id = ++i
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject()
        console.log(`rej #${id} called after ${n} milliseconds`, Date.now() - start)
      }, n)
    })
  }
  
  try {
    const delay1 = res(3000)
    const delay2 = res(2000)
    const delay3 = rej(1000)

    const data1 = await delay1
    const data2 = await delay2
    const data3 = await delay3
  } catch (error) {
    console.log(`await finished`, Date.now() - start)
  }
}

example()

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します