Promise.allSettled()使用场景

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

Promise.allSettled()使用场景

上一节我们介绍了Promise.allSettled()方法的第一种使用场景,今天我们再看看其他使用场景。

调用多个独立的 Web 服务 API

Promise.all() 部分的另一个示例是调用多个 Web 服务 API,您希望所有请求都成功。 如果您不需要所有请求都成功,那么您可以使用 Promise.allSettled() 代替。 回到前面的例子,如果可以显示用户个人资料页面,即使某些数据丢失,然后使用 Promise.allSettled() 而不是 Promise.all() 以避免向用户显示错误。 例如:

const API_BASE = "https://jsonplaceholder.typicode.com";

function fetchUserData(userId) {

  const urls = [
	`${API_BASE}/users/${userId}/posts`,
	`${API_BASE}/users/${userId}/albums`,
	`${API_BASE}/users/${userId}/extras`
  ];

  return Promise.allSettled(urls.map(url => fetch(url)))
    .then(results => results.map(result => result.value));
}

fetchUserData(1).then(responses => {
  return Promise.all(
    responses.map(
      response => {
        if (response?.ok) {
          return response.json();
        }
      }
    )
  );
}).then(([posts, albums, extras]) => {

  // process your data as necessary
  if (posts) {
    console.log("Posts");
    console.log(posts);
  }

  if (albums) {
    console.log("Albums");
    console.log(albums);
  }

  if (extras) {
    console.log("Extras");
    console.log(extras);
  }
  
}).catch(reason => console.error(reason.message));

在这个版本的示例中, fetchUserData() 函数使用 Promise.allSettled() 而不是 Promise.all() 来确保可以忽略rejection。 此示例还调用了第三个端点 /users/{userId}/extras,它不存在并将返回 404(用于演示目的)。一旦所有请求都完成,fulfillment handler将每个结果映射到其 value 属性, 这确保任何rejected的promise都映射到undefined, fulfilled的promise被映射到从 fetch() 返回的响应对象。

因为 response 可能是undefined,所以在检查 ok 属性之前,您需要检查 response 是否为真。 然后读取每个有效响应的 JSON 正文,最后一个fulfillment handler读取该数据。 无法保证每个请求的数据都会存在(在此示例中是undefined),因此您需要在处理之前检查每个值是否存在。

 

等待动画完成

在网页中,元素可以同时以多种不同的方式进行动画处理。 例如,您可以为从页面底部向上的元素位置设置动画,同时还可以设置动画将元素扩大到视图中的宽度和高度。 在这些情况下,等待所有动画完成后再对元素或页面进行下一次修改是很有帮助的。 在他的文章中,构建一个 toast 组件,Adam Argyle 解释了一种跟踪 DOM 元素动画何时完成的基本方法。 为了清楚起见,我在这里重写了代码:

function waitForAnimations(element) {
  return Promise.allSettled(
    element.getAnimations().map(animation => animation.finished)
  );
}

const toasterElement = document.getElementById("toaster");
waitForAnimations(toasterElement)
.then(() => console.log("Toaster is done."));

在这种情况下,您并不真正关心是否有任何动画在此过程中失败,也不关心从动画中接收任何已实现的值,因此 Promise.allSettled() 是比 Promise.all() 更合适的选项 . getAnimations() 方法返回一个动画对象数组,每个对象都有一个finished 属性,其中包含一个promise,该promise 在动画完成时被解析。 通过将这些promise中的每一个传递给 Promise.allSettled(),当所有动画完成时,您将收到通知。 因为 Promise.allSettled() 永远不会返回rejected的promise,所以您可以附加一个fuifillment handler,而不必担心任何未捕获的rejection错误。

版权声明:著作权归作者所有。

相关推荐

配置Eclipse使用Java9

Oxygen 4.7.1aEclipse Oxygen 4.7.1a已经支持Java 9启动,以及支持Java 9的开发,直接安装Eclipse Oxygen 4.7.1a即可,不需要特别的配置。但运行可能会出现一些环境问题,也可以按以下配置eclipse.ini指定Java 9的vm-vm C:\Program&nb

Python3.5使用subprocess.run调用外部程序

Python 3.5的subprocess模块新增了run()函数,大部分调用子进程的场景都推荐使用run()函数,一些高级的用法则可以直接调用Popen 接口。run()函数run函数常用参数如下:run(args, *, stdin=None, input=None, stdout=None, stderr=None, shell=False, cwd=None, timeout=N

java.util.Objects的使用

java.utils.Objects针对Object对象提供了几个静态的工具方法,这些方法可以归类为:null安全检查对象比较计算对象hash code对象转换为Stringnull安全检查null安全检查有5个方法:isNull(Object obj):检查对象是否为null,null返回true,否则返回falsenonNull(Object obj):与isNu

使用Webpack、TypeScript 和React搭建应用

这里简单介绍基于webpack + typescript + react搭建一个应用。初始化项目创建一个空文件夹demo,使用npm在空文件夹初始化项目。npm init npm install --save-dev webpack npm install --save-dev types

RabbitMQ使用rabbitmqctl添加用户管理

rabbitmqctrl是RabbitMQ的管理工具,在RabbitMQ安装目录的sbin下。虚拟主机管理添加虚拟主机rabbitmqctl add_vhost <vhost> 删除虚拟主机rabbitmqctl delete_vhost <vhost>用户管理 添加用户rabbitmqctl add_user <username> <

TensorFlow2 tf.dataset的使用

这个笔记主要是TensorFlow 2.0的tf.dataset接口的使用。下面的示例会把numpy array的数据写入到TFRecord文件中,以及从TFRecord文件中读取数据到numpy array。安装可以参考官网的https://www.tensorflow.org/install教程来安装。安装完成后,检查安装的TensorFlow的版本:import tensorflow as

SwiftUI Alerts的使用示例

SwiftUI里的Alerts可以分为三类:警告对话框(Alert Dialogs)操作列表(Action Sheets)弹窗(Popovers)警告对话框(Alert Dialogs)示例使用SwiftUI,我们可以很容易地使用声明的方式来创建警告框以及定义操作,示例如下:struct AlertView: View { @State private var showingAlert =

.NET Core 3 System.Text.JSON的使用

ASP.NET Core 3.0引入了原生支持处理json的Sytem.Text.Json,替换了之前的Newtonsoft.Json。如果项目中使用的是.NET Standard或者.NET framework(v4.6.1+),如果想使用System.Text.Json,则需要安装System.Text.Jsonde NuGet包。添加Namespaces使用System.Text.Json首

Linux下gcc的使用

在Linux系统中,可执行文件没有统一的后缀,系统从文件的属性来区分可执行文件和不可执行文件.而gcc则通过后缀来区别输入文件的类别,下面介绍gcc所遵循的部分约定规则. .c为后缀的文件,是C语言源代码文件; .a为后缀的文件,是由目标文件构成的库文件; .C,.cc,.cxx为后缀的文件,是C++源代码文件; .h为后缀的文件,是程序所包含的头文件; .i为后缀的文件

Angular集成moment.js使用

moment.js是一个专门用于处理时间的包。可以通过下面的方法把moment.js集成到Angular中使用。一、使用npm安装moment.jsnpm install --save moment二、在使用moment.js的.ts文件中导入import * as moment from 'moment'; 三、使用moment.jsmyDate = moment(someDate).