等待Promise.all（）和多次等待之间有什么区别？

180

之间有什么区别：

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

javascript async-await

— 隐
source

密切相关：等待多个并发等待操作

— Bergi，

209

注意事项：

这个答案仅涵盖了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具有“快速失败”的行为：

_范例＃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()

展开摘要

— zzzzBov
source

因此，基本上区别只是Promise.all的“快速失败”功能？

— 马修（Matthew）

@mclzc在示例3中，进一步的代码执行将暂停，直到delay1解析。甚至在“如果您使用async-await替代，您将必须等待每个promise依次解决”

— 文本中

@Qback，有一个实时代码段演示了该行为。考虑运行它并重新读取代码。您不是第一个误解承诺顺序行为的人。您在演示中犯的错误是您没有同时履行诺言。

— zzzzBov

@zzzzBov你是对的。您正在同时启动它。抱歉，出于另一个原因来到了这个问题，但我忽略了这一点。

— Qback

“ 它可能不那么有效 ”-更重要的是，会导致unhandledrejection错误。您将永远不会想要使用它。请将此添加到您的答案。

— Bergi