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


猜你喜欢

  • 解决 Promise 异步编程在低版本浏览器中不兼容的问题

    Promise 是 ES6 异步编程新标准的一部分,其在解决异步编程中回调地狱的问题上占有重要作用。它是一个对象,表示一个异步操作的最终完成或失败。 但是在低版本的浏览器中,Promise 并没有被完...

    4 天前
  • 响应式设计下的翻页效果实现技巧

    响应式设计下的翻页效果实现技巧 随着移动设备的普及,越来越多的网站开始采用响应式设计。在响应式设计中,页面的布局和元素的大小会根据不同设备的屏幕大小和分辨率而自适应调整。

    4 天前
  • ES6中的对象字面量扩展和解构赋值的进阶用法

    1. 背景 ES6带来了很多方便的语法糖,其中对象字面量扩展和解构赋值是非常实用的两个特性。它们已经成为前端代码中的常见语法了。本文将介绍ES6中对象字面量扩展和解构赋值的进阶用法,包括:动态属性名、...

    4 天前
  • Restful API vs GraphQL API - 针对 API 新人的简介

    在开发前端应用程序时,必须考虑到与后端的通信。为了实现这种通信,Web 开发人员通常使用 API(应用程序编程接口)。目前,最常用的 API 是 Restful API 和 GraphQL API,那...

    4 天前
  • ECMAScript 2021: 新特性 Reflect.metadata() 详解

    ECMAScript 2021 (ES12) 是 JavaScript 最新的标准,该标准引入了许多新的特性和语法,其中一个最令人瞩目的特性是 Reflect.metadata()。

    4 天前
  • 如何在 Jest 中进行安全性测试?

    在现代 Web 应用程序开发中,安全性已成为一个极为重要的问题。在许多情况下,安全性测试是开发流程中一个必不可少的部分。在前端开发领域中,Jest 是一个广泛使用的测试框架,它可以帮助开发人员编写测试...

    4 天前
  • CSS Grid 布局:如何使用 video/audio 等多媒体元素?

    CSS Grid 布局是一种新的布局方式,允许我们以灵活和高效的方式建立复杂的网格结构,使多媒体元素的布局处理更加简单且易于管理。 这篇文章将介绍如何使用 CSS Grid 布局来布置视频和音频等多媒...

    4 天前
  • 无障碍应用程序中的键盘焦点定位技巧与方法介绍

    随着无障碍应用程序的普及,键盘焦点定位技巧和方法成为了前端技术开发不可或缺的部分。在这篇文章中,我们将详细介绍无障碍应用程序中的键盘焦点定位技巧和方法,并提供一些实用的示例代码。

    4 天前
  • 如何在 PWA 应用中使用 CSS Grid?

    什么是 PWA 应用? PWA 应用是 Progressive Web Application 的缩写,它是一种新型的应用程序类型,它结合了 Web 和 Native 应用程序的最佳功能。

    4 天前
  • Serverless 架构下的数据库和存储管理指南

    前言 Serverless 架构在近年来越来越受到前端开发者的追捧,因为它可以将开发者从服务器配置、维护和扩展等操作中解放出来,从而更加专注于业务的开发和创新。但是,当你的应用程序需要使用数据库和存储...

    4 天前
  • 如何正确使用 ES6 中的 async/await 功能

    随着 JavaScript 的发展,异步编程越来越受欢迎。ES6 中推出的 async/await 功能可以使异步编程更加易读和易用。本文将详细介绍 async/await 的使用方法,以及注意事项和...

    4 天前
  • Deno 部署遇到权限限制问题如何解决?

    Deno 部署遇到权限限制问题如何解决? Deno 是一个新兴的 Web 应用程序平台,可以用于开发跨平台的 Web 应用程序。它的出现对前端开发者的工作效率和开发体验有了巨大的提升。

    4 天前
  • SSE 实现负载均衡的方式及实现过程

    SSE 实现负载均衡的方式及实现过程 SSE(Server-Sent Events)是一种服务器向客户端推送事件的 Web 技术,它可以轻松地实现服务器到客户端的实时数据传输。

    4 天前
  • Headless CMS 如何保证数据安全与隐私保护

    前言 Headless CMS(无头内容管理系统)是一种新兴的内容管理技术,它与传统的 CMS 不同,它不直接渲染网站的内容,而是提供 API,供前端开发人员获取和展示数据。

    4 天前
  • CSS Reset 和 normalize.css 的区别与使用

    在前端开发中,CSS 的 Reset 和 Normalize 是常用的技术手段,在开发过程中它们是用来重置浏览器的默认样式的。但是,虽然这两种技术最终目的相同,但它们的实现思路和使用方式却存在一定的区...

    4 天前
  • ECMAScript 2019(ES10)中的新特性全解

    ECMAScript是JavaScript的标准化语言规范,每年都会发布新的版本。在2019年,ECMAScript 2019(ES10)发布了许多新特性,这些新特性不仅提高了JavaScript的可...

    4 天前
  • Promise 异步编程中文件上传的处理方法

    前言 随着 Web 应用的不断发展,越来越多的网站开始需要文件上传的功能。无论是头像、音乐、视频还是普通的 Word 文档,都需要用户上传到服务器。在此过程中,异步编程是必不可少的—— 因为如果采用同...

    4 天前
  • 如何通过 Deno 构建 RESTful API?

    如果你已经接触过 Node.js,那么 Deno 这个可以在浏览器和服务器中运行的 JavaScript 和 TypeScript 运行时也许会让你感到很新颖。Deno 是一个全新的基于 V8 引擎的...

    4 天前
  • Cypress 之 Jenkins 自动集成测试

    随着前端应用越来越复杂,测试也变得越来越重要。自动化测试在保证高质量的同时,也能提高测试效率。本文将介绍如何使用 Cypress 和 Jenkins 实现前端自动化集成测试,并提供示例代码供参考。

    4 天前
  • Chai.js 中 expect().to.have.all.keys 如何使用

    介绍 Chai.js 是一个流行的 JavaScript 断言库,它允许您编写易读、带有产生错误的测试。在本文中,我们将学习 Chai.js 中 expect().to.have.all.keys 的...

    4 天前

相关推荐

    暂无文章