在 ECMAScript 2017 中使用新类的 Promise.allSettled()—— 解决 Promise.all() 的问题

阅读时长 4 分钟读完

在 JavaScript 中,Promise 已成为异步编程的重要工具。当我们需要处理多个异步操作并按特定顺序返回结果时,Promise.all() 是一种非常方便的工具。Promise.all() 接受一个 Promise 数组,当数组中所有 Promise 都已经成功解决后,它才会成功地返回一个包含所有结果的新数组,并且在数组中的元素顺序与 Promise 数组中的顺序相匹配。如果其中任何一个 Promise 被拒绝了,则 Promise.all() 将返回一个被拒绝的 Promise。

然而,随着 ES2020(ES11)的到来,引入了一个名为 Promise.allSettled() 的新方法,允许在所有 Promise 解决后返回结果,而不需要担心其中任何一个 Promise 是被拒绝的。

Promise.all() 的局限性

Promise.all() 虽然在大多数情况下都是很有用的,但是它有一个问题。当 Promise.all() 中的 Promise 数组中的某个 Promise 被拒绝时,Promise.all() 将立即近回一个被拒绝的 Promise。因此,Promise.all() 可能无法检测和处理 Promise 数组中可能发生的错误。这可能是非常糟糕的,因为我们可能需要获取 Promise 数组中所有 Promise 的结果,而不必关心它们是否被拒绝。

为了解决这个问题,ECMAScript 2020 引入了一个新的方法:Promise.allSettled()。

Promise.allSettled() 的作用

Promise.allSettled() 接受一个 Promise 数组,并返回一个新的 Promise,该 Promise 将在数组中的所有 Promise 都成功完成或拒绝后解决。不像 Promise.all(),Promise.allSettled() 不会在任何 Promise 被拒绝时中断,并且返回所有 Promise 的结果。

Promise.allSettled() 返回的结果是一个数组,每个元素都是一个对象,该对象表示原始数组中相应位置的 Promise 的处理结果。其包含以下两个属性:

  • status:表示 Promise 的状态,可以是字符串 "fulfilled" 或字符串 "rejected"。如果 Promise 被成功处理,则为 "fulfilled",否则为 "rejected"。
  • valuereason:分别表示 Promise 成功和被拒绝时的结果值。

下面是一个使用 Promise.allSettled() 的示例:

上面的例子中,我们创建了一个包含三个 Promise 的数组。第一个 Promise 需要 2 秒钟来返回结果,第二个 Promise 需要 3 秒钟来返回错误,而第三个 Promise 需要 1 秒钟来返回结果。我们将这个 Promise 数组作为参数传递给 Promise.allSettled(),并使用 then() 来处理返回的结果。

在上面的代码中,我们使用 forEach() 方法分别打印每个 Promise 的状态和值或原因。输出结果为:

总结

Promise.allSettled() 的出现,给异步编程带来了更大的灵活性,使我们可以安全地处理 Promise 数组的每个 Promise,而不必关心它们的状态。当我们需要同时处理 Promise 数组中的成功和失败时,Promise.allSettled() 是非常有用的工具。

掌握 Promise.allSettled() 方法的使用,是前端开发人员必备的技能之一。它可以帮助我们更有效地处理异步操作,提高代码的质量和可靠性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64ae7c0e48841e9894a8e3ed

纠错
反馈