如何在 ECMAScript 2017 中正确使用 Promise.allSettled

ECMAScript 2017 引入了 Promise.allSettled 方法,它返回一个 promise,该 promise 在所有给定的 promise 都已经 fulfilled 或者 rejected 后才会被 resolved。与 Promise.all 不同的是,Promise.allSettled 不会在任何一个 promise 被 rejected 时就立即返回,而是会等待所有 promise 都执行完毕后才进行返回。这为我们处理一些异步操作带来了更多的可能性。在今天的文章中,我们将详细探讨如何在 ECMAScript 2017 中正确使用 Promise.allSettled,并且给出一些实际案例供大家学习。

Promise.allSettled 的基本用法

Promise.allSettled 的用法与 Promise.all 类似,只不过 Promise.allSettled 不会在任何一个 promise 被 rejected 的时候立即返回,并且返回的为一个所有 promise 的状态的数组。

例如,我们有以下 3 个异步操作:

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

我们可以使用 Promise.allSettled 来等待它们完成,并获取它们的状态:

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

输出结果为:

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

其中,每个元素包含一个状态和一个值或原因。状态有两种:fulfilled 和 rejected。因为我们在这里使用的是 Promise.resolve 和 Promise.reject,所以越过了每个 promise 的状态。通常情况下,这个方法依然会等待所有的 promise 完成后才会返回。在下面的例子中,我们来看一下不同的任务如何影响返回的结果:

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

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

这里的结果会和上一个例子不一样,输出结果如下:

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

上面的代码中,p1 3 毫秒结束,p2 2 毫秒结束,p3 1 毫秒结束,因此结果按照执行的不同,变成了数组。不过值得注意的是,这个方法依然会等待所有的 promise 完成后才会返回,如果中途代码报错或者代码运行时间过长等,总时间也会相应地增加。

处理异步操作中的错误

在异步操作中,经常出现一些操作失败的情况,一般来说,当我们使用 Promise.all 的时候,如果期中的任何一个 promise 被 rejected,整个操作都会失败。但是在使用 Promise.allSettled 的时候,如果存在 rejected 的 promise,它依旧会等待所有的 promise 完成,因此我们可以在所有操作都结束后对失败的 promise 进行统一的处理。

例如,我们假设 p2 是一个失败的 promise:

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

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

经过测试,你会发现无论 p2 在数组中的位置如何,最后都会打印出:

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

这正是 Promise.allSettled 可以帮助我们简化异步处理的原因。

如何使用 Promise.allSettled 实现并行异步操作

Promise.allSettled 提供了一种并行异步操作的机制。这个机制可以与 Promise.all、Promise.race 等方法配合使用,来完成复杂的异步操作。在下面的例子中,我们将结合 Promise.allSettled 与 Promise.race 实现一个异步操作的顺序机制:

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

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

输出的结果为:

--

因为这里使用了 Promise.race 和 Promise.allSettled,因此,我们可以保证如下的情况:在完成所有任务后,它会返回“最快的一个任务的结果”。

结论

在本文中,我们简要介绍了 ECMAScript 2017 的一个新 API:Promise.allSettled。这个 API 可以帮助我们处理异步操作中被拒绝的情况,并且提供了一种并行异步操作的机制。我们可以利用它来强化我们的异步应用程序,加快程序的运行速度,并提高应用程序的完整性。

-- ----

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

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

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

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

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


猜你喜欢

  • 如何优化 Fastify 应用程序性能

    Fastify 是一个高度性能且基于 Node.js 的 Web 框架,它的设计理念是专注于与 HTTP 等协议的数据传输,同时提供一个插件体系结构以增强其功能。在实际项目中,提高 Fastify 应...

    8 天前
  • 如何在 SASS 中书写易维护的样式?

    概述 在开发过程中,样式通常是最难维护的部分之一。而 SASS(Syntactically Awesome Style Sheets)则是一种预处理器,可以提供更灵活和易于维护的 CSS 代码。

    8 天前
  • 在 ES12 中使用 `String.prototype.trimStart` 方法处理代码缩进

    在 ES12 中使用 String.prototype.trimStart 方法处理代码缩进 前端开发中代码缩进对于代码可读性很重要,但是在写代码时我们经常会出现多余的缩进空格,引起不必要的麻烦。

    8 天前
  • 解决 Angular 7 在 IE11 浏览器中不兼容的问题

    随着 Internet Explorer 浏览器的逐渐淘汰,越来越多的前端框架和库停止了对 IE 浏览器的支持,其中就包括 Angular 7。然而,在某些场景下,仍会有用户使用 IE 浏览器访问网站...

    8 天前
  • GraphQL 中的查询优化技巧

    GraphQL 是一种用于构建 API 的查询语言。它使客户端能够以一种灵活、强大且高效的方式请求数据。尽管 GraphQL 有很多优点,但有时您的 GraphQL 查询可能会变得很复杂,特别是当您需...

    8 天前
  • MongoDB 事务操作实现

    在传统的数据库中,事务操作是非常常见的操作方式,其可以保证一组操作要么全部成功要么全部失败,保证数据的一致性与可靠性。而在 MongoDB 中,事务操作的支持非常有限,而在 4.0 版本的 Mongo...

    8 天前
  • Redis 内存管理及遇到的 bug 应对方式

    1. Redis 内存管理介绍 Redis 是一种高性能的 key-value 存储系统,而其内存管理是其高性能的重要因素之一。Redis 内存中的数据可以在瞬间被访问,因此它是设计为完全放置在内存中...

    8 天前
  • Performance Optimization:在应用程序开发过程中提高性能的 10 个最佳实践

    Performance Optimization:在应用程序开发过程中提高性能的 10 个最佳实践 优秀的前端性能可以带来更快的页面加载时间,更高的用户满意度以及更好的搜索引擎排名。

    8 天前
  • RESTful API 设计中的缓存处理策略

    在设计 RESTful API 时,缓存处理是一个常见的需求。缓存可以显著提高系统的性能和吞吐量,并减轻服务器的负担。在本文中,我们将探讨 RESTful API 中的缓存处理策略,包括缓存控制头、条...

    8 天前
  • 用 jQuery 轻松实现响应式设计

    在现代网站中,响应式设计是必不可少的一部分。它能让网站适应不同的设备尺寸,并提供更好的用户体验。而jQuery作为一款广泛使用的JavaScript库,其提供了丰富的工具和技巧,帮助Web开发者更轻松...

    8 天前
  • Cypress 测试框架中的页面截图功能实现

    Cypress 是一个现代化的 JavaScript 测试框架,它具有强大的自动化测试能力,可以对网站进行端到端的测试。测试的过程中,我们可能需要捕捉一些错误信息或者验证测试结果,此时,采用页面截图功...

    8 天前
  • 如何使用与 WCAG2.0 无障碍指南相关的工具和技术

    如何使用与 WCAG2.0 无障碍指南相关的工具和技术 无障碍设计在网站和应用程序的开发中变得越来越重要。WCAG2.0(Web Content Accessibility Guidelines)为网...

    8 天前
  • Babel-loader 升级后报错,解决方法大全

    Babel-loader 是一种使用 Babel 将代码转换为可以在现代浏览器中运行的 ES5 语法的 webpack loader。然而,当升级到新版本时,可能会遇到一些问题。

    8 天前
  • TypeScript 和 SAS 与 React 中的数据查询方案

    作为现代化 Web 应用程序的重要组成部分,数据查询方案是传统的开发方式无法比拟的优势之一。近年来,随着 TypeScript 和 SAS 的普及,Web 开发领域也已逐渐从传统的 JavaScrip...

    8 天前
  • Express.js 中 session 的使用方法和注意事项

    Express.js 中 session 的使用方法和注意事项 Express.js 是一个流行的 Web 应用程序框架,提供了一种在 Node.js 上构建 Web 应用程序的简单方法。

    8 天前
  • 解决 RxJS 中被忽略的错误问题

    RxJS 是一个强大的响应式编程库,它为我们提供了一种优雅的方式来处理异步操作和事件流。然而,在实际应用中,如果我们不小心处理错误,就容易出现一些被忽略的错误问题。

    8 天前
  • Fastify 和 TypeScript 结合使用!不再需要使用 Joi 了

    在传统的 Node.js web 应用中,Joi 是一个常用的数据验证库。但是当我们开始使用 Fastify 和 TypeScript 时,Joi 就变得不那么必要了,因为 Fastify 已经提供了...

    8 天前
  • 如何使用 Angular 6 创建一个简单的登录表单

    在现代Web应用程序中,登录表单是不可或缺的一部分。Angular 6是一种基于类型的Web应用程序开发框架,它可以实现高效的开发、测试和部署。在本文中,我们将介绍如何使用Angular 6创建一个简...

    8 天前
  • 如何在 Mocha 测试中使用 redux-mock-store 进行 Redux 测试?

    Redux 是一个常用于管理应用程序状态的库。在前端开发中,Redux 经常被用来维护应用程序的全局状态。然而,如何对 Redux 进行测试仍然是很多开发者面临的挑战之一。

    8 天前
  • 如何使用 Koa2 实现文件转换功能

    Koa2 是一个 Node.js 的 web 框架,它提供了轻量、灵活的方法来编写网络应用程序。在这篇文章中,我们将介绍如何使用 Koa2 实现文件转换功能。这个功能可以将各种不同类型的文件转换成其他...

    8 天前

相关推荐

    暂无文章