如何在 ECMAScript 2021 中合理使用 promise.any 方法

Promise.any() 是 ECMAScript 2021 中新增的方法之一,它的作用是在所有 Promise 中只要有一个 resolve 了,它就会 resolve;如果全部 reject 了,那它就会 reject。如果你对它并不是很熟悉,类似于以下这段代码:

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

这段代码经过 promise.any 会输出 3,因为 Promise.resolve(3) resolve 了;如果 Promise.resolve(3) 换成 Promise.reject(3), 则所有 Promise 都会 reject 后输出一个 AggregateError 错误。

接下来,我们深入了解一下 Promise.any(),并学习如何在前端开发中更好地使用它。

Promise.any() 的基础知识

Promise.any() 拥有以下特点:

  1. 当传入的 Promise 有一个是 resolved 状态,Promise.any() 立即 resolve。
  2. 当传入的 Promise 全部都是 reject 状态,Promise.any() 会返回 AggregateError 错误。
  3. 和 Promise.race() 一样,Promise.any() 同样可以接受两个或者以上的 Promise。
  4. Promise.any() 返回的 Promise 的值是第一个被 fulfilled 的 Promise 的值。
  5. Promise.any() 返回的 Promise 的状态和第一个被 fulfilled 的 Promise 一致。

基本上,Promise.any() 与 Promise.race() 类似,只不过 Promise.any() 可以接受两个或以上的 Promise 对象,并且只要其中一个 Promise 对象有结果返回即可,而 Promise.race() 是只要有一个 Promise 对象有结果返回即可。

Promise.any() 的使用

在实际项目中,Promise.any() 可以帮助我们同时调用两个或者多个请求,并且只要有一个请求返回结果,就可以执行后续操作。

下面是一个具体的示例:

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

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

  ------ ----
-

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

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

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

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

在这个示例中,我们假设我们接口中返回的 userIds 是由后台人员提供的。那么我们就不知道在多少个请求中有结果返回,或者在多久之后。使用 Promise.any() 就可以方便地处理这种情况。

Promise.any() 的注意事项

虽然 Promise.any() 带来了方便,但它也有一些需要注意的地方,其中最重要的是:

  1. 当传入的 Promise 全部都是 reject 状态时,Promise.any() 会返回 AggregateError 错误。
  2. 如果使用 Promise.any() 的话,一定要加上对 AggregateError 的处理代码。

对于第一点,我们需要提前考虑。如果我们希望所有请求都失败才会出错,那么我们就尽量避免使用 Promise.any()。如果我们确定传入的 Promise 在全部 reject 时会出现错误,那么我们也需要加上对 AggregateError 的处理代码。

下面是处理 AggregateError 的方式:

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

当错误发生时,我们会将错误推入至一个数组中,当我们已经等待所有请求结束后,再抛出错误。

总结

Promise.any() 新增了一个方便的方式来处理多个异步操作并取回第一个成功的操作的结果。与之前的 Promise.all() 方法类似,这个方法也带来了一些注意点。对于使用 Promise.any() 的场景,需要对 AggregateError 错误的处理方式格外小心。当然,如何在实践中使用 Promise.any() 还是需要我们在开发中不断实践,发掘出更多的技巧和最佳的使用方式。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64912b1548841e9894f2f0b6


猜你喜欢

  • Serverless 架构千万级访问量的实现案例

    在互联网时代,Web 应用的用户数量和访问量都是非常巨大的,如何满足这样的较高负载量是很多前端工程师需要解决的问题。而在这个领域中,Serverless 架构成为了一个备受关注的技术。

    1 年前
  • 使用 Material Design 创建通知视觉元素

    Material Design 是谷歌推出的一种设计风格,它的目标是创建一个设计语言,让用户可以轻松地在移动设备和台式机之间实现一致的视觉体验。在 Material Design 中,通知视觉元素是非...

    1 年前
  • CSS Flexbox 布局实现多列等高的技术方法

    随着互联网的不断发展,前端开发已经成为了许多企业在业务拓展方面最为关注的重要技术领域。在这个充满激烈竞争的市场,如何提高网页的用户体验,已成为每一个前端开发者必须解决的关键问题之一。

    1 年前
  • 如何解决 LESS 样式在 IE 中无法正常渲染的问题

    前端开发中,我们经常使用 CSS 预处理器来编写样式表。其中 LESS 是一种常用的预处理器之一,然而在 IE 浏览器中,使用 LESS 编写的样式表却经常出现无法正常渲染的问题。

    1 年前
  • Headless CMS 如何处理前端路由?

    Headless CMS 是一种新兴的内容管理系统,它与传统 CMS 不同的是,不具备前端展示层,而仅仅提供管理数据的功能。它的出现,解决了前端开发人员面临的多终端适配、多页面维护、规范化的问题,并且...

    1 年前
  • 如何在 Babel 中使用 decorators 装饰器

    在现代的前端开发中,JavaScript 已经成为一种极为重要的编程语言,而 Babel 则是 JavaScript 编译器中的一款极为出色的工具。其能够帮助开发者将新的 ECMAScript 版本(...

    1 年前
  • Vue.js 中使用 vuex 进行状态管理的最佳实践

    Vue.js 是一款流行的前端框架,它可以帮助开发者快速构建交互式、响应式的 web 应用程序。然而,随着应用程序的复杂性增加,管理组件的状态变得越来越困难。Vuex 是一个 Vue.js 官方的状态...

    1 年前
  • Redux 中如何实现回退和重做?

    在前端开发中,状态管理是一个很重要的问题。Redux 是最流行的 JavaScript 状态管理库之一,它提供了一种可预测、一致和透明的状态管理方案。其中一个重要的功能是回退和重做,让用户可以撤销操作...

    1 年前
  • TypeError: undefined is not a function 的解决方法

    在前端开发过程中,我们可能会经常遇到 TypeError: undefined is not a function 这样的错误,通常是因为我们在调用一个未定义的函数时发生了这样的情况。

    1 年前
  • Jest 中 Mock 的使用方法详解

    Jest 中 Mock 的使用方法详解 前言 在前端开发中,测试是相当重要的一环。而为了保证测试的准确性以及提高测试的效率,我们通常需要使用一些 Mock 的技术来模拟我们需要测试的对象。

    1 年前
  • React Native 中使用 Navigator 实现页面导航

    在 React Native 的开发中,页面导航是一个必不可少的功能。Navigator 是 React Native 中用于管理导航的组件,它可以让开发者灵活地管理不同页面之间的跳转和传递参数。

    1 年前
  • 使用 ES10 的 Map 结构优化 Ajax 请求数据处理

    当我们使用 Ajax 技术获取数据时,返回的数据可能会很大,甚至可能有数千条数据,如果我们使用传统的数组或对象结构进行处理,可能会导致性能下降和处理效率降低。而使用 ES10 提供的 Map 结构,可...

    1 年前
  • 如何优雅地捕获 Promise 中的错误

    本文将详细介绍如何优雅地捕获 Promise 中的错误。 Promise 在前端开发中广泛使用,它将异步操作转化为链式调用、易于理解和维护。但是,在 Promise 中的错误处理却是一个经常被忽视的问...

    1 年前
  • Hapi.js 教程:使用 Good 插件进行 Node.js 日志记录

    在开发 Web 应用程序时,日志记录是一项极其重要的工作,因为它可以为开发者提供有关应用程序运行状况和问题的有用信息。在 Node.js 前端开发中,Hapi.js 是一个流行的 Web 框架,它提供...

    1 年前
  • 在 Node.js 中使用 RxJS 模块的基础知识

    简介 RxJS 是 ReactiveX 的 JavaScript 版本,它提供了一个强大的 Reactive 编程模型。在 Node.js 中使用 RxJS 可以帮助开发者更好地处理异步 I/O 操作...

    1 年前
  • Sequelize 连接池的使用和配置

    在 Node.js 后端开发中,Sequelize 是一个广泛使用的 ORM 框架,它提供了许多便利的功能来处理与关系型数据库的交互。开发人员可以使用 Sequelize 来定义模型、查询数据库等,而...

    1 年前
  • Vue.js SPA 应用中的策略缓存实现

    Vue.js SPA 应用中的策略缓存实现 在 Vue.js 单页面应用 (SPA) 中,经常需要在用户访问不同页面时缓存一些常用的数据,以提高应用的性能和用户体验。

    1 年前
  • 深入理解 ES6 中的 Promise 及其使用技巧

    前置知识 在深入理解 Promise 之前,我们需要先了解一些前置知识,如:函数、异步编程、回调函数以及 Promise 的基本语法等。 Promise 的概念 Promise 是一种解决 JavaS...

    1 年前
  • 利用 Custom Elements 打造漂亮且易于使用的 web 组件

    Web 组件是前端开发中最重要的概念之一,特别是在现代化的 web 应用程序中。它们允许开发者将 UI 拆分成可重用的部分,使得代码更易于维护和扩展。在这篇文章中,我们将探讨如何使用 Custom E...

    1 年前
  • MongoDB 索引使用心得分享

    简介 MongoDB 是一个流行的 NoSQL 数据库,它使用文档存储数据,比起传统关系型数据库更加灵活和扩展性强。但是,在处理大量数据时,如果没有良好的索引设计,查询性能可能会受到很大影响。

    1 年前

相关推荐

    暂无文章