ECMAScript 2020 中的 Promise.allSettled 方法的使用

ECMAScript 2020 中的 Promise.allSettled 方法的使用

在 JavaScript 中,Promise 作为一种异步编程的利器,非常常见。而在 ECMAScript 2020 中,新添加了一个 Promise.allSettled 方法,它在使用多个 Promise 时非常有用。

Promise.allSettled 与 Promise.all 不同,之前的所有 Promise 一旦有一个出现错误,就会直接返回异常,而 Promise.allSettled 则会在所有 Promise 都有结果(无论是成功还是失败)后才会返回结果。这个新方法应用场合较多,本文就来详细介绍其使用方法。

使用语法

Promise.allSettled 返回一个 Promise,它在所有给定的 Promise 都已经 fulfilled 或 rejected 时回调并提供一个对象数组。每个对象都表示与其对应的 Promise 结果。

语法如下:

Promise.allSettled(iterable)

其中,iterable 表示可以迭代的一组 Promise。

返回的结果是一个 Promise 对象,它的状态为 fulfilled。

当所有的 Promise 都成功执行时,返回的结果对象数组的每个元素为:

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

当任意一个 Promise 失败时,返回的结果对象数组的每个元素为:

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

使用示例

假设我们有一个用来从服务器获取用户信息的 Promise 对象,并且我们要同时获取多个用户的信息并且在所有用户信息请求完成后进行展示。

在以前,我们可以这样使用 Promise.all 的方法实现:

let promises = [getUserInfo(1), getUserInfo(2), getUserInfo(3)];

Promise.all(promises).then(function(results) { let userInfoList = []; for(var i=0; i< results.length; i++) { userInfoList.push(results[i]); } displayUserInfo(userInfoList); }).catch(function(error) { console.log("Error", error); });

当其中任意一个 Promise 失败时,就会直接返回 error。而如果我们想要在所有 Promise 均已执行后展示用户信息,需要使用 Promise.allSettled 方法。

如下所示:

let promises = [getUserInfo(1), getUserInfo(2), getUserInfo(3)];

Promise.allSettled(promises).then(function(results) { let userInfoList = [];

results.forEach(function(userPromiseResult) { if(userPromiseResult.status === 'fulfilled') { userInfoList.push(userPromiseResult.value); } }); displayUserInfo(userInfoList); }).catch(function(error) { console.log("Error", error); });

上述代码使用 Promise.allSettled 方法来获取每个 Promise 的结果。如果 Promise 成功了,我们将其添加到用户信息列表中;如果失败了,我们就不做处理了。

这样做在实际项目中十分方便,可以处理更多的业务逻辑。而在之前的方法中,如果有一个请求失败了,就需要把最终的列表中的数据进行处理。

总结

ECMAScript 2020 中的 Promise.allSettled 方法让我们在处理多个 Promise 时更加方便,能够在所有 Promise 都已经 fulfilled 或 rejected 时,获取到每个 Promise 的结果,支持对结果的进一步处理。

如果你在编写 JavaScript 代码时需要使用这种处理方式,那么可以尝试使用 Promise.allSettled 这个新的方法,它将大大提高你的编码效率。

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


猜你喜欢

  • Web Components 自定义元素(续):使用 Shadow DOM

    在前一篇文章中,我们介绍了如何创建自定义元素。不过,在实际应用中,我们经常需要隔离自定义元素的样式和内部元素,为此,Web Components 提供了 Shadow DOM 的机制。

    1 年前
  • Koa2 实现服务端上传文件和下载文件

    Koa2 是一个轻量级的 Node.js web 框架,它简化了 Node.js 应用的开发。其中包括对文件上传和下载的支持,这使得我们很容易实现文件操作功能。本文将演示如何使用 Koa2 框架来上传...

    1 年前
  • 如何优化 MySQL 数据库性能

    如何优化 MySQL 数据库性能 MySQL 是一款开源的关系型数据库管理系统,被广泛应用于互联网、科研和企业级应用等领域。在大数据和高并发时代,MySQL 数据库的性能优化越来越受到关注。

    1 年前
  • generator 与 Promise 的结合

    在 JavaScript 中,generator 与 Promise 是两个非常重要的概念。虽然它们本身是独立的,但是结合使用可以让我们更加方便地处理异步代码,提高代码可读性和可维护性。

    1 年前
  • Mongoose 的 Schema 和 Model 器使用详解

    Mongoose 是一个用于 Node.js 和 MongoDB 的 elegant ORM(对象关系映射),可以让我们更方便地在 Node.js 中使用 MongoDB 数据库。

    1 年前
  • ES6 中基于 Reflect 扩展封装的实用工具类介绍

    Reflect 是 ES6 中新增的一个全局对象,提供了一系列与 Proxy 相关的方法,使得在使用代理对象时更加方便。Reflect 主要提供了以下方法: Reflect.apply(target...

    1 年前
  • Redis 处理超时异常的优化技巧

    在前端开发中,我们经常使用 Redis 进行数据缓存和管理。但是,由于网络问题或者服务端问题,有时会出现 Redis 命令执行超时的情况。这时候,我们需要对 Redis 进行超时异常的优化处理,以便达...

    1 年前
  • Docker 部署 Vue + Node.js 项目

    前言 在 Web 开发过程中,我们常常需要部署 Web 服务,并确保其稳定性和可靠性。Docker 是近年来兴起的一种容器化技术,使得 Web 服务的部署和管理变得更加简便和高效。

    1 年前
  • 让 Kubernetes 起死回生的方法:重置集群状态

    Kubernetes 是当前最火爆的容器管理平台之一,它提供了强大的自动化容器部署、容器伸缩、负载均衡、服务发现等能力。但是,由于其复杂性和高度的集成度,Kubernetes 的故障排查和修复也变得非...

    1 年前
  • Angular 7:使用 ng-template 和 ng-container 创建动态模板

    在 Angular 7 中,ng-template 和 ng-container 组合使用可以帮助我们创建动态模板,让我们的代码更加灵活、易于扩展。本文将从深度和学习的角度,为你介绍这两个指令的使用方...

    1 年前
  • SPA 应用中如何将第三方 SDK 集成进来

    单页应用(SPA)是一个越来越流行的前端开发模式。对于一个 SPA 应用来说,它通常需要集成一些第三方 SDK,比如广告 SDK,分享 SDK,或者地图 SDK 等等。

    1 年前
  • 使用 JavaScript 编写自定义元素

    随着 HTML5 标准的普及,自定义元素的概念也逐渐被广泛应用于前端开发中。自定义元素可以让开发者创建自己的组件,而不需要在 HTML 中使用标准的标签。在本文中,我们将介绍如何使用 JavaScri...

    1 年前
  • ECMAScript 2021 中的耳熟能详的函数彻底讲解

    在前端开发中,函数是一个非常核心的概念,几乎所有的代码都是基于函数运行的。虽然我们在日常的开发中经常使用函数,但是我们是否真正理解了函数的内部实现和操作呢?本文将对 ECMAScript 2021 中...

    1 年前
  • 如何在 Fastify 中使用 SQLite 数据库

    前言 在前端的开发中,使用数据库是很常见的场景。然而,关于如何在 Fastify 中使用 SQLite 数据库,大家可能并不是很了解。本文将从头开始介绍如何使用 SQLite 数据库在 Fastify...

    1 年前
  • 使用 ES9 中加入的 Promise.finally() 来处理异步操作

    前言 在前端开发中,我们经常会遇到异步操作。例如:请求远程 API、读取本地文件、渲染页面等。这些操作并不是立刻完成的,而是需要等待一定时间才能得到结果。因此,在处理异步操作的过程中,我们需要保证对结...

    1 年前
  • 如何在响应式设计中避免指针事件冲突

    引言 在一些复杂的响应式设计中,你可能需要使用多个指针事件(如 click、mouseover 等)来实现各种功能,但是当页面缩放或设备旋转时,不同元素的位置和大小会发生变化,就会产生指针事件冲突,导...

    1 年前
  • MongoDB 中的数据冗余存储问题研究

    随着互联网的发展,数据的存储和处理已经成为了一项非常重要的技术。在这个过程中,数据库起到了举足轻重的作用。MongoDB 作为一种开源的 NoSQL 数据库,具有高可扩展性、高性能、卓越的数据复杂查询...

    1 年前
  • 测试 React App 时遇到的功能模块主动作动问题及 Enzyme 的应用

    在前端开发中,测试是非常重要的一环。针对 React App 的测试中,经常会遇到有些功能模块主动触发事件无法正确测试的问题。本文将介绍这一问题的原因和解决方法,并且讲解如何使用 Enzyme 工具进...

    1 年前
  • Deno 实战:使用 Deno 构建 RESTful API

    随着 Node.js 不断发展,JavaScript 成为了前端界的一首独角戏。但是 Node.js 作为老将,其存在着许多已经无法改变的问题,例如模块管理、包管理等等。

    1 年前
  • 使用 Mocha 进行测试驱动的 React 开发

    在 React 开发中,测试非常重要。测试可以保证代码质量,预防错误,便于重构和维护。本文将介绍如何使用 Mocha 进行测试驱动的 React 开发。 搭建环境 首先需要创建一个 React 项目,...

    1 年前

相关推荐

    暂无文章