ES10 中 Promise.allSettled 的应用和用法介绍

阅读时长 4 分钟读完

Promise.allSettled 是 ES10 中新增的方法之一,它可以接收一个 Promise 数组,并返回一个新的 Promise 对象。

在这篇文章中,我们将会深入了解 Promise.allSettled 的应用及用法,并提供一些示例代码帮助大家更好地理解。

应用场景

在实际开发中,Promise.all 方法常常被用来处理多个异步操作。

在这个例子中,我们将三个 Promise 实例传递给了 Promise.all 函数,并在所有的 Promise 均已成功处理后打印它们的值。

然而,如果有一个 Promise 拒绝(reject)了,整个 Promise.all 将会立即终止并抛出一个错误,导致其他 Promise 无法被处理。

为了解决这个问题,Promise.allSettled 应运而生。该方法不会跳过任何 Promise,而是会返回所有 Promise 的结果(包括成功和失败)。

用法介绍

Promise.allSettled 与 Promise.all 的使用方式相似,只需将 Promise 数组传递给它即可。它返回一个 Promise 对象,该 Promise 将在所有 Promise 都已经 settled(也就是成功或失败)后 resolve,并将结果以数组的形式返回。

在这个例子中,promise2 被拒绝,但是 Promise.allSettled 仍然返回一个数组包含所有 Promise 的结果(包括 promise2 的失败)。

每一个 Promise 对象在数组中都包含了以下两个属性:

  • status:Promise 的状态,可能是 "fulfilled" 或 "rejected"
  • valuereason:当 Promise 成功时返回的值,失败时返回的错误原因。

以下是一个使用 Promise.allSettled 的完整示例代码:

-- -------------------- ---- -------
----- ---- - -
  ---------------------------------------------
  ------------------------------------------------
  ---------------------------------------------
--

------------------------------- -- ------------
  ------------- -- -
    ---------------------- -- -
      -- -------------- --- ------------ -
        --------------------------
      - ---- -
        ---------------------------
      -
    ---
  ---
展开代码

在这个例子中,我们使用 fetch API 获取多个 URL 的数据,并使用 Promise.allSettled 捕获每个 Promise 的结果。

当 Promise 有一个拒绝时,我们可以使用 result.reason 访问错误的原因,并在控制台中打印错误信息。

总结

在本文中,我们介绍了 ES10 中的 Promise.allSettled 方法、其用法及应用场景,并提供了一些示例代码帮助大家理解。

通过使用 Promise.allSettled,我们可以更好地处理多个 Promise 的结果,同时避免由于单个 Promise 的失败导致整个 Promise 链的中断。

希望这篇文章能够帮助你更好地理解 Promise.allSettled 的用法及其在前端开发中的作用。

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

纠错
反馈

纠错反馈