ES6 - promise.all和race方法的用法详解

在这里插入图片描述

文章目录

      • 一、前言
      • 二、`Promise.all()`
        • 1,第一句:Promise.all()方法接受一个数组作为参数,且每一个都是 Promise 实例
        • 2,第二句:如果不是,就会先调Promise.resolve方法,将参数转为 Promise 实例再进一步处理
        • 3,第三句:Promise.all()方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例
      • 三、`Promise.race()`
      • 四、总结

一、前言

谈谈你对Promise的理解?

:Promise用来解决异步回调问题,由于js是单线程的,很多异步操作都是依靠回调方法实现的,这种做法在逻辑比较复杂的回调嵌套中会相当复杂;也叫做回调地狱;

promise用来将这种繁杂的做法简化,让程序更具备可读性,可维护性;promise内部有三种状态,pending,fulfilled,rejected;pending表示程序正在执行但未得到结果,即异步操作没有执行完毕,fulfilled表示程序执行完毕,且执行成功,rejected表示执行完毕但失败;这里的成功和失败都是逻辑意义上的;并非是要报错。其实,promise和回调函数一样,都是要解决数据的传递和消息发送问题,promise中的then一般对应成功后的数据处理,catch一般对应失败后的数据处理。

(1) All方法

他是Promise对象中的方法 他是一次执行多个promise;

(2) race方法

他也是Promise对象中的方法 他是执行最快的那个promise;All方法可以触发多个 ,他只是触发一个 但是在多个promise中做出一个选择,选择出一个运行最快的promise;

二、Promise.all()

Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

上面代码中,Promise.all()方法接受一个数组作为参数,p1p2p3都是一个 Promise 实例,如果不是,就会先调Promise.resolve方法,将参数转为 Promise 实例再进一步处理。另外,Promise.all()方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。

该怎么理解这句话呢,下面将逐句说明;

1,第一句:Promise.all()方法接受一个数组作为参数,且每一个都是 Promise 实例

这句话说明了 Promise的标准用法:

即传入一个数组,期望数组里面的每一项都是一个promise实例;如下使用:

	 ## 1,先定义几个异步函数,此处用定时器 let p1 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_1");}, 1000);});let p2 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_2");}, 2000);});let p3 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_3");}, 3000);});## 2,使用Promise.all([p1, p3, p2]).then((result) => {console.log(result); // 结果为:['success_2', 'success_3', 'success_1']}).catch((error) => {console.log(error); });

等待几秒后,结果打印为:

['success_2', 'success_3', 'success_1']

Promise.all接收到的数组顺序是一致的,即p3的结果在p2的前面,即便p3的结果获取的比p2要晚;这带来了一个很大的好处;

在前端开发请求数据的过程中,偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景,使用Promise.all毫无疑问可以解决这个问题;


Promise.all 里面所有的promise都执行成功(fulfilled状态)才会返回成功的数组,只要有一个失败(reject),就会被catch回调捕获;如下失败的情况:

 	 let p1 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_1");}, 1000);});let p2 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_2");}, 2000);});## 1,失败的promsielet p3 = Promise.reject("失败");## 2,执行Promise.all([ p1,p2,p4]).then((result) => {console.log(result);}).catch((error) => {console.log("error:",error); // 失败了,打印 '失败'});

执行结果如下:

error:失败

说明只要其中有一个失败就返回失败数据;

注意:如果作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法

请务必记住:promise.all 接收的promise数组,是按顺序且同步执行的


2,第二句:如果不是,就会先调Promise.resolve方法,将参数转为 Promise 实例再进一步处理

如果我们传入的数组项不是promsie对象,还会正常执行吗:

(1):传入的数组每一项都不是 promise实例

		## 直接传 几个number类型Promise.all([1, 2, 3]).then((res) => {console.log("res:", res); // [1,2,3]}).catch((err) => {console.log("err:", err);});

执行结果:

[1,2,3]

可以看出:如果传入数组中的每一项都不是 promise对象 则会原封不动的让 resolve()函数返回 ;
既拿到什么就返回什么;

(2)第二种:传入的数组中既有promise实例 也有不是的

如下:我传了number 1,2 和两个promise实例 p2,p1;

     let p1 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_1");}, 1000);});let p2 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_2");}, 2000);});Promise.all([1, 2, p2, p1]).then((res) => {console.log("res——2:", res); //  [1, 2, 'success_2', 'success_1']}).catch((err) => {console.log("err:", err);});

执行结果:

 [1, 2, 'success_2', 'success_1']

可以看出:执行的顺序是先返回非promise, 再执行p2,p1这两个promise对象,然后也按照顺序并返回结果;


3,第三句:Promise.all()方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例

怎么理解这句话呢,说明all方法传入的不一定是数组,还可能是支持遍历(Iterator)的其他数据结构;那这个数据结构不就是ES6新增的 Set集合吗;

概述Set集合

Set也是ES6的数据结构。特点是无序不重复,它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构,Set函数可以接受一个数组作为参数,用来初始化。

使用Promise.all()传入Set集合:

      let p1 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_1");}, 1000);});let p2 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_2");}, 2000);});let p3 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_3");}, 3000);});## 1,定义Set集合let myMap = new Set([p2, p1, p3]); console.log("myMap:", myMap); // Set(3) {Promise, Promise, Promise}## 2,all方法传入Set集合Promise.all(myMap).then((myMapRes) => {console.log("myMapRes:", myMapRes); //   ['success_2', 'success_1', 'success_3']}).catch((err) => {console.log("err:", err);});

执行结果:

['success_2', 'success_1', 'success_3']

可以看出,执行的结果是和数组的方式是一样的;

三、Promise.race()

Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);

Promise.race是赛跑的意思,也就是说Promise.race([p1, p2, p3])里面的结果哪个获取的快,就返回哪个结果,不管结果本身是成功还是失败。

使用场景:

有时我们比如说有好几个服务器的好几个接口都提供同样的服务,我们不知道哪个接口更快,就可以使用Promise.race,哪个接口的数据先回来我们就用哪个接口的数据;

代码如下:

      let p1 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_1");}, 1000);});let p2 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_2");}, 2000);});let p3 = new Promise((resolve, reject) => {setTimeout(function () {resolve("success_3");}, 3000);});## 调用race方法Promise.race([p2,p1,p3]).then(res=>{console.log("resRace:",res); // resRace: success_1}).catch(err=>{console.log("errRace:",err);})

执行结果:

resRace: success_1

p1确实是执行最快的,返回执行最快的那个promsie的resolve结果,其他的promsie将不会再管了;

当然,如果最快的这个执行promsie失败了,也是会走catch回调的;

四、总结

  1. promise.all 接收的promise数组,总是按顺序且同步执行并返回的;只要有一个promise失败,最终状态就是失败的(reject)就会被catch捕获。
  2. promise.race 也接收promise数组,总是返回执行最快的那一个,其他promise的状态并不关心。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/13428.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pytorch的发展历史,与其他框架的联系

我一直是这样以为的:pytorch的底层实现是c(这一点没有问题,见下边的pytorch结构图),然后这个部分顺理成章的被命名为torch,并提供c接口,我们在python中常用的是带有python接口的,所以被称为pytorch。昨天无意中看到Torch是由lua语言写的&…

【如何训练一个中英翻译模型】LSTM机器翻译模型部署(三)

系列文章 【如何训练一个中英翻译模型】LSTM机器翻译seq2seq字符编码(一) 【如何训练一个中英翻译模型】LSTM机器翻译模型训练与保存(二) 【如何训练一个中英翻译模型】LSTM机器翻译模型部署(三) 【如何训…

Windows Server 2012 能使用的playwright版本

由于在harkua_bot里面使用到了playwright,我的服务器又是Windows Server 2012 R2,最新版playwright不支持Windows Server 2012 R2,支持Windows Server 2016以上,所以有了这个需求 https://cdn.npmmirror.com/binaries/playwright…

Hadoop生态体系-HDFS

目录标题 1、Apache Hadoop2、HDFS2.1 设计目标:2.2 特性:2.3 架构2.4 注意点2.5 HDFS基本操作2.5.1 shell命令选项2.5.2 shell常用命令介绍 3、HDFS基本原理3.1 NameNode 概述3.2 Datanode概述 1、Apache Hadoop Hadoop:允许使用简单的编程…

Android Hook 剪切板相关方法

想起之前做过的项目有安全合规要求:主动弹窗获取用户同意了才能调用剪切板相关方法,否则属于违规调用,如果是自己项目的相关调用可以自己加一层if判断 但是一些第三方的jar包里面也有在调用的话,我们就无能为力了,而且…

JPA连接达梦数据库导致auto-ddl失效问题解决

现象: 项目使用了JPA,并且auto-ddl设置的为update,在连接达梦数据库的时候,第一次启动没有问题,但是后面重启就会报错,发现错误为重复建表,也就是说已经建好的表没有检测到,…

JVM类加载

一、类记载过程 1、通过类的全限定名获取存储该类的class文件 2、解析成运行时数据,即instanceKlass实例,存放到方法区 3、在堆区生成该类的class对象,即instanceMirrorKlass实例 二、将.class文件解析成什么?类的元信息在JVM中如何…

ceph集群中RBD的性能测试、性能调优

文章目录 rados benchrbd bench-write测试工具Fio测试ceph rbd块设备的iops性能测试ceph rbd块设备的带宽测试ceph rbd块设备的延迟 性能调优 rados bench 参考:https://blog.csdn.net/Micha_Lu/article/details/126490260 rados bench为ceph自带的基准测试工具&am…

全加器(多位)的实现

一,半加器 定义 半加器(Half Adder)是一种用于执行二进制数相加的简单逻辑电路。它可以将两个输入位的和(Sum)和进位(Carry)计算出来。 半加器有两个输入:A 和 B,分别代表…

MySQL基础扎实——MySQL中有那些不同的表格

表格类型 在MySQL中,常见的表格类型有以下几种: MyISAM:是MySQL默认的表格类型,具有较高的性能和较小的存储空间占用。但是,MyISAM不支持事务、崩溃恢复和数据行级锁定。 InnoDB:是MySQL提供的一个更强大…

Redis实现分布式锁

文章目录 4、分布式锁4.1 、基本原理和实现方式对比4.2 、Redis分布式锁的实现核心思路4.3 实现分布式锁版本一4.4 Redis分布式锁误删情况说明4.5 解决Redis分布式锁误删问题4.6 分布式锁的原子性问题4.7 Lua脚本解决多条命令原子性问题4.8 利用Java代码调用Lua脚本改造分布式锁…

MySQL | 常用命令示例

MySQL | 常用命令示例 一、启停MySQL数据库服务二、连接MySQL数据库三、创建和管理数据库四、创建和管理数据表五、数据备份和恢复六、查询与优化 MySQL是一款常用的关系型数据库管理系统,广泛应用于各个领域。在使用MySQL时,我们经常需要编写一些常用脚…

【数据结构】【王道408】——PPT截图与思维导图

自用视频PPT截图 视频网址王道B站链接 23考研 408新增考点: 并查集,红黑树 2023年408真题数据结构篇 408考纲解读 考纲变化 目录 第一章 绪论第二章 线性表顺序表单链表双链表循环链表静态链表差别 第三章 栈 队列 数组栈队列栈的应用数组 第四章 串第五…

软考A计划-系统集成项目管理工程师-项目质量管理-中

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列 👉关于作者 专注于Android/Unity和各种游戏开发技巧&#xff…

小程序UV:衡量用户规模与活跃度的重要指标

什么是UV UV是Unique Visitor(独立访客)的缩写,指的是在特定时间段内访问某个网站、应用或平台的独立用户数量。UV是根据设备、IP地址、Cookie等来识别不同的用户,对于相同的用户多次访问,只计算为一个UV。UV是衡量网…

流数据湖平台Apache Paimon(一)概述

文章目录 第1章 概述1.1 简介1.2 核心特性1.3 基本概念1.3.1 Snapshot1.3.2 Partition1.3.3 Bucket1.3.4 Consistency Guarantees一致性保证 1.4 文件布局1.4.1 Snapshot Files1.4.2 Manifest Files1.4.3 Data Files1.4.4 LSM Trees 第1章 概述 1.1 简介 Flink 社区希望能够将…

RocketMQ重复消费的解决方案::分布式锁直击面试!

文章目录 场景分析方法的幂等分布式锁Redis实现分布式锁抢锁的设计思路 分布式锁案例 直击面试rocketmq什么时候重复消费消息丢失的问题消息在哪里丢失发送端确保发送成功并且配合失败的业务处理消费端确保消息不丢失rocketmq 主从同步刷盘 场景分析 分布式系统架构中,队列是分…

css实现有缺口的border

css实现有缺口的border 1.问题回溯2.css实现有缺口的border 1.问题回溯 通常会有那种两个div都有border重叠在一起就会有种加粗的效果。 div1,div2,div3都有个1px的border,箭头标记的地方是没有处理解决的,很明显看着是有加粗效果的。其实这种感觉把di…

【Java从入门到大牛】集合进阶上篇

🔥 本文由 程序喵正在路上 原创,CSDN首发! 💖 系列专栏:Java从入门到大牛 🌠 首发时间:2023年7月29日 🦋 欢迎关注🖱点赞👍收藏🌟留言&#x1f43…

IntelliJ IDEA流行的构建工具——Gradle

IntelliJ IDEA,是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具,尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超常的。 如…