ES9 中 Promise 的新功能 --Promise.any() 实战应用

ES9 中 Promise 的新功能 --Promise.any() 实战应用

Promise.any() 是 ES9(ECMAScript2019)中的一个新的 Promise 实例方法。它返回一个 Promise,会在至少一个传入的迭代对象中解决,并且以解决的值解决返回的 Promise ,如果所有迭代对象都拒绝(rejected),则返回拒绝的原因(reason)。

在本文中,我们将深入探讨 Promise.any() 的实现、应用以及如何使用它来简化我们的开发工作。

Promise.any() 的使用方法

Promise.any() 方法可以接收一个可迭代(iterable)对象作为参数,并返回一个 Promise 对象。其中,可迭代对象可以是一个数组( array),一个 Map or Set 等等。

以下是 Promise.any() 的基本结构:

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

在这个代码片段中,我们传递了一个 iterable 对象作为 Promise.any() 的参数,并接收解决的值(value)或拒绝的原因(error)。

Promise.any() 的实现方式

Promise.any() 方法的实现相对简单,它的工作原理是在任何一个 Promise 对象成功时返回一个解决的 Promise。如果所有 Promise 对象都拒绝了,则返回一个拒绝的 Promise。

我们可以使用 Promise.race() 方法将所有传入的 Promise 对象集合成一个非拒绝即解决的新 Promise,因为使用 Promise.race() 方法失败的 Promise 对象并不会抛出异常或拒绝。

下面是 Promise.any() 的实现方式:

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

在这个代码片段中,我们首先创建了一个新的 Promise 对象。然后,我们定义了一个空数组 errors,用于存储拒绝的原因,以及一个 promises 数组,用于存储接收到的可迭代对象。

接下来,如果 promises 数组为空,我们就会返回一个拒绝的 Promise 对象,并且会在拒绝对象内创建一个新的 AggregateError 类型的对象,其中包含 "No promises were passed" 的消息。

对于每个接收到的 Promise 对象,我们都将其解析为 Promise,然后使用 Promise.resolve() 方法将其转换为一个新的 Promise 并调用 .then() 方法。如果 Promise 成功解决,我们返回一个解决的 Promise,并调用 .then() 方法来解决结果。

如果 promise 拒绝,我们将拒绝的原因推到 errors 数组中,然后检查是否已经处理完所有的 Promises。如果是,则返回一个拒绝对象,并在对象内创建一个新的 AggregateError 类型的对象,其中包含所有相应错误的消息。

Promise.any() 的应用实例

现在我们来看一个使用 Promise.any() 方法的实际例子。

假设我们想要从不同的服务器路径获取 data 数据,在这种情况下,我们可以使用 Promise.any() 方法。如果您使用的是现代浏览器,则可以通过 fetch() 函数从多个 URL 请求数据。 fetch() 函数返回一个 Promise 对象,其中包含使用 .then() 方法解决的 data。如果 fetch() 请求失败,Promise 对象将拒绝并使用 .catch() 方法返回错误。

以下是一个简单的示例:

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

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

在上面的代码片段中,我们首先定义了一个包含所有 URL 的数组 urls。接下来,我们使用 .map() 方法为每个 URL 创建一个新的 Promise,并将其储存到变量 requests 中。然后,我们使用 Promise.any(requests) 方法调用 Promise 以获取第一个解决状态的 Promise 对象。

如果 Promise 成功,则我们使用 .then() 方法返回一个解析的 Response 对象,并调用 .text() 方法来获取解析对象的响应文本。如果 Promise 拒绝,则我们使用 .catch() 方法记录错误。

结论

总之,Promise.any() 是一个非常实用的新特性,它可以用来简化我们的代码并将多个 Promise 封装成一个非拒绝即解决的 Promise。它的应用场景非常广泛,比如在某些情况下,我们需要从多个不同的URL或 API 获取数据,我们就可以使用它来避免出现时间以及请求过多等问题。

参考资料:

  • MDN Web Docs: Promise.any()
  • GitHub: Promise.any() and AggregateError..

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/670e47eb5f55128102605c3e