Promise.all的深入理解「建议收藏」

Promise.all的深入理解「建议收藏」异步之PromisePromise.allPromise.all接收的promise数组是按顺序执行的还是一起执行的,也就是说返回的结果是顺序固定的吗?目前有两种答案:应该是同步执行的,但是这样就有效率问题了,如果想改成异步执行怎么办呢?有些人认为结果是按顺序执行的,有些人认为结果顺序不确定。那么我们根据实现来解密:环境为:vscode1.20….

大家好,又见面了,我是你们的朋友全栈君。

异步之Promise

Promise.all

Promise.all接收的promise数组是按顺序执行的还是一起执行的,也就是说返回的结果是顺序固定的吗?

目前有两种答案:

  1. 应该是同步执行的,但是这样就有效率问题了,如果想改成异步执行怎么办呢?
  2. 有些人认为结果是按顺序执行的,有些人认为结果顺序不确定。

那么我们根据实现来解密:

环境为:

vscode 1.20.1
node   v8.9.0
npm    v5.6.0

实验代码:

// 获取随机数,toFixed为四舍五入保留小数,0为保留整数,范围~1000
const getRandom = () => +(Math.random()*1000).toFixed(0);

const asyncTask = (taskID) => new Promise( (resolve) => {
    // 随机获取一次0~1000的随机数
    let timeout = getRandom();
    // 打印出传递进来的ID号 taskID=1 start.
    console.log(`taskID=${taskID} start.`);
    // 设置计时时间,function()等价于 () => {...}
    setTimeout(function() {
        // 打印出执行的taskID,和timeout
        console.log(`taskID=${taskID} finished in time=${timeout}.`);
        // 异步成功执行
        resolve(taskID)
    }, timeout);
});

Promise.all([asyncTask(1),asyncTask(2),asyncTask(3)])
.then(resultList => {
    console.log('results:',resultList);
});

实验结果如下:

第一次

taskID=1 start.
taskID=2 start.
taskID=3 start.
taskID=2 finished in time=321.
taskID=3 finished in time=506.
taskID=1 finished in time=932.
results:
Array(3) [1, 2, 3]

第二次

taskID=1 start.
taskID=2 start.
taskID=3 start.
taskID=1 finished in time=243.
taskID=3 finished in time=305.
taskID=2 finished in time=792.
results:
Array(3) [1, 2, 3]

第三次

taskID=1 start.
taskID=2 start.
taskID=3 start.
taskID=3 finished in time=380.
taskID=1 finished in time=539.
taskID=2 finished in time=782.
results:
Array(3) [1, 2, 3]

补充知识介绍

// toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
NumberObject.toFixed(num)
// num	必需。规定小数的位数,是 0 ~ 20 之间的值,包括 0 和  
// 20,有些实现可以支持更大的数值范围。如果省略了该参数,将用 0 代替。

Promise构造函数只有一个参数,该参数是一个函数,被称作执行器,执行器有2个参数,分别是resolve()和reject(),一个表示成功的回调,一个表示失败的回调。

new Promise(function(resolve, reject) {
  setTimeout(() => resolve(5), 0)
}).then(v => console.log(v)) // 5

记住,Promise实例只能通过resolve或者reject函数来返回,并且使用then()或者catch()获取,不能在new Promise里面直接return,这样是获取不到Promise返回值的。


由此可见,Promise.all 里的任务列表[asyncTask(1),asyncTask(2),asyncTask(3)],我们是按照顺序发起的。
但是根据结果来说,它们是异步的,互相之间并不阻塞,每个任务完成时机是不确定的,尽管如此,所有任务结束之
后,它们的结果仍然是按顺序地映射到resultList里,这样就能和Promise.all里的任务列表
[asyncTask(1),asyncTask(2),asyncTask(3)]一一对应起来。

深入理解Promise.all()

*可能看到这里有些人没有清楚,为什么返回一个数组? *
我们在来看一下这段代码:

Promise.all([asyncTask(1),asyncTask(2),asyncTask(3)])
.then(resultList => {
    console.log('results:',resultList);
});

通常我们在使用异步的时候都是只有一个Promise,现在我们使用all()方法包装多个Promise实例。

语法很简单:参数只有一个,可迭代对象,可以是数组,或者Symbol类型等。

Promise.all(iterable).then().catch()

传入3个Promise实例:

Promise.all([
  new Promise(function(resolve, reject) {
    resolve(1)
  }),
  new Promise(function(resolve, reject) {
    resolve(2)
  }),
  new Promise(function(resolve, reject) {
    resolve(3)
  })
]).then(arr => {
  console.log(arr) // [1, 2, 3]
})

那么我们回头想想应该明白了吧?
因为我们传入的是数组,那么返回的必须是数组,并且会将讲过进行映射。

Promise.race()

语法和all()一样,但是返回值有所不同,race根据传入的多个Promise实例,只要有一个实例resolve或者reject,就只返回该结果,其他实例不再执行。

我们简单看一下例子,返回结果为3,因为我们设置了定时器,第三个Promise执行的最快。

Promise.race([
  new Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 1000)
  }),
  new Promise(function(resolve, reject) {
    setTimeout(() => resolve(2), 100)
  }),
  new Promise(function(resolve, reject) {
    setTimeout(() => resolve(3), 10)
  })
]).then(value => {
  console.log(value) // 3
})

异步为什么使用箭头函数

这是我一直困惑的原因,我们将前面的例子进行改造一下。

如下:

const getRandom = () => +(Math.random()*1000).toFixed(0);

function test(taskID) {
  return new Promise( (resolve) => {
    // 随机获取一次0~1000的随机数
    let timeout = getRandom();
    // 打印出传递进来的ID号
    console.log(`taskID=${taskID} start.`);
    setTimeout(function() {
        console.log(`taskID=${taskID} finished in time=${timeout}.`);
        resolve(taskID)
    }, timeout);
} )
}

Promise.all([test(1),test(2),test(3)])
.then(resultList => {
    console.log('results:',resultList);
});

我们先来看一下结果是怎样的?

第一次:

taskID=1 start.
taskID=2 start.
taskID=3 start.
results:
Array(3) [undefined, undefined, undefined]
taskID=1 finished in time=460.
taskID=2 finished in time=704.
taskID=3 finished in time=883.

第二次:

taskID=1 start.
taskID=2 start.
taskID=3 start.
results:
Array(3) [undefined, undefined, undefined]
taskID=2 finished in time=17.
taskID=3 finished in time=212.
taskID=1 finished in time=612.

第三次:

taskID=1 start.
taskID=2 start.
taskID=3 start.
results:
Array(3) [undefined, undefined, undefined]
taskID=3 finished in time=130.
taskID=1 finished in time=256.
taskID=2 finished in time=593.

实验还是要至少做上3次以上才有说服力。

通过输出结果我们能够看出返回的数组内的数据都为undefined。我们就要找出这个原因,那就是找到了为什么要使用箭头函数。

  1. 首先我通过调试来查找
    如图:
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oZTdOow8-1628238283115)(https://note.youdao.com/yws/api/personal/file/WEBcfbe51c67215e9414c1ac940d99e0caa?method=download&shareKey=c3945e0b4a991911953e4986d51b11cd)]

程序首先打印出了

taskID=1 start.
taskID=2 start.
taskID=3 start.

说明一定是先执行了

console.log(`taskID=${taskID} start.`);

所以我们在这段打上断点进行一步一步调试,如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vVqeaAeA-1628238283117)(https://note.youdao.com/yws/api/personal/file/WEBdae375d2f798007f6390ff75f746943b?method=download&shareKey=3c091febde5a6b7e582e7a261b7b8854)]

根据上图我们可以看出console.log(taskID=${taskID} start.)每次都会被执行,setTimeout也会被执行,但是3次之后,就会直接开始执行.then(),所以我们找到了原因,Promise.all()这时并没有等待返回完整的数据就执行了.then(),没有等到resolve就开始执行了。

说明这里面出现了异常,而这个异常就是由于Promise.all()内的参数,存在函数,造成this混淆,所以我们要使用对象,更准确的说法就是***实例***。

注意:

以这段代码为例:

var p1 = Promise.resolve(1),
    p2 = Promise.resolve(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    console.log(results);  // [1, 2, 3]
});

在上面的方法中,promise数组中所有的promise实例都变为resolve的时候,该方法才会返回,并将所有结果传递results数组中。promise数组中任何一个promise为reject的话,则整个Promise.all调用会立即终止,并返回一个reject的新的promise对象。reject使用示例如下:

var p1 = Promise.resolve(1),
    p2 = Promise.reject(2),
    p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
    //then方法不会被执行
    console.log(results); 
}).catch(function (e){
    //catch方法将会被执行,输出结果为:2
    console.log(2);
});
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/141893.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 数仓分层简介(实时数仓架构)

    数仓1.数仓分层好处:复杂问题简单化;减少重复开发;隔离原始数据。2.数仓分层具体实现ODS(OperationDataStore)层:原始数据层,存原始数据,直接加载原始日志、数据DWD(DataWarehouseDetail)层:明细数据层也有叫DWI层,结构和粒度与原始表保持一致,对ODS层数据进行清洗(去除空值、脏数据、超过极限范围的数据、行式存储转列式存储、改压缩格式)DWS(DataWarehouseService)层:服务数据层,以DWD为基础进行轻度汇总。比如:用户当日

    2022年4月17日
    80
  • 服务器如何存储图片(图片服务器搭建方案)

    参考:https://www.zhihu.com/question/20518854我们的ext4/dev/sda37299235847亿多个inode了。数据库直接存图片本身是SB的做法。比较好的方法是存图片md5,然后通过类似md52url获取图片的地址。至于图片存放,建议打散,打3级或5级。类似a/de/df/adedf***************.jpg…

    2022年4月10日
    328
  • 字符串之切片

    字符串概念及作用字符串相关操作索引Python的字符串是不可以改变的字符序列正向索引:s=”ABCD”s[0]#As[4]#D反向索引:s[-4]#As[-1]#D切片

    2022年3月29日
    40
  • 总结进制转换的方法_八进制计算方法

    总结进制转换的方法_八进制计算方法今天朋友去面试,面试官问他八进制转换二进制方式原理,他突然间蒙逼了,在常见的计算机知识当中,这种最基础的知识,常常会被人给忘记,所以今天我来写一篇进制转换的总结,来复习巩固一下。本文参考百度经验(https://jingyan.baidu.com/article/495ba84109665338b30ede98.html),如有侵权,请通知删除先讲一下定义吧,进制也就是进制位,对于接触过电脑的…

    2022年8月31日
    2
  • 不能定义声明dllimport_不允许 dllimport 静态数据成员

    ViewCode“CTest::~CTest”:不允许dllimport函数的定义“CTest::CTest”:不允许dllimport函数的定义//代码如下templateclass__declspec(dllimport)CTest{public:CTest();~CTest();};templateCTest::CTest(){//}templateCTest::~…

    2022年4月9日
    305
  • matlab 画折线图

    matlab 画折线图代码:效果图:x=1:1:5就是x轴上的数据,从1开始到5结束(即应该有五个数据),每个数据的间隔是1.把开始的1改成2,结束的5改成6,整个折线图就会向右平移一个单位。plot(x,a,’-*b’,x,b,’-or’)是设置折线图中相应点和线的特征的,函数说明如下:对于‘’内的线条形状,总结了如下图:线型:线条宽度:指定线条的宽度,取值为整数(…

    2022年4月29日
    61

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号