一尘不染

等待Promise.all()和多次等待之间有什么区别?

javascript

之间有什么区别:

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];

阅读 903

收藏
2020-05-01

共1个答案

一尘不染

注意事项

这个答案仅涵盖了await系列和系列之间的时序差异Promise.all。。


为了这个答案的目的,我将使用一些示例方法:

  • 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具有“快速失败”的行为:

范例#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改为使用,则必须等待每个promise依次解决,这可能没有那么有效:

例子#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()
2020-05-01