异步之Promise
Promise.all
Promise.all接收的promise数组是按顺序执行的还是一起执行的,也就是说返回的结果是顺序固定的吗?
目前有两种答案:
- 应该是同步执行的,但是这样就有效率问题了,如果想改成异步执行怎么办呢?
- 有些人认为结果是按顺序执行的,有些人认为结果顺序不确定。
那么我们根据实现来解密:
环境为:
实验代码:
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);
});
实验结果如下:
第一次
第二次
第三次
补充知识介绍:
Promise构造函数只有一个参数,该参数是一个函数,被称作执行器,执行器有2个参数,分别是resolve()和reject(),一个表示成功的回调,一个表示失败的回调。
记住,Promise实例只能通过resolve或者reject函数来返回,并且使用then()或者catch()获取,不能在new Promise里面直接return,这样是获取不到Promise返回值的。
由此可见,Promise.all 里的任务列表[asyncTask(1),asyncTask(3)]
,我们是按照顺序发起的。
但是根据结果来说,它们是异步的,互相之间并不阻塞,每个任务完成时机是不确定的,尽管如此,所有任务结束之
后,它们的结果仍然是按顺序地映射到resultList里,这样就能和Promise.all里的任务列表
[asyncTask(1),asyncTask(3)]
一一对应起来。
深入理解Promise.all()
可能看到这里有些人没有清楚,为什么返回一个数组?
我们在来看一下这段代码:
通常我们在使用异步的时候都是只有一个Promise,现在我们使用all()方法包装多个Promise实例。
语法很简单:参数只有一个,可迭代对象,可以是数组,或者Symbol类型等。
传入3个Promise实例:
那么我们回头想想应该明白了吧?
因为我们传入的是数组,那么返回的必须是数组,并且会将讲过进行映射。
Promise.race()
语法和all()一样,但是返回值有所不同,race根据传入的多个Promise实例,只要有一个实例resolve或者reject,就只返回该结果,其他实例不再执行。
我们简单看一下例子,返回结果为3,因为我们设置了定时器,第三个Promise执行的最快。
异步为什么使用箭头函数
这是我一直困惑的原因,我们将前面的例子进行改造一下。
如下:
function test(taskID) {
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);
});
我们先来看一下结果是怎样的?
第一次:
第二次:
第三次:
实验还是要至少做上3次以上才有说服力。
通过输出结果我们能够看出返回的数组内的数据都为undefined。我们就要找出这个原因,那就是找到了为什么要使用箭头函数。
首先我通过调试来查找
如图:
程序首先打印出了
taskID=1 start. taskID=2 start. taskID=3 start.
说明一定是先执行了
所以我们在这段打上断点进行一步一步调试,如下:
根据上图我们可以看出console.log(taskID=${taskID} start.
)每次都会被执行,setTimeout也会被执行,但是3次之后,就会直接开始执行.then(),所以我们找到了原因,Promise.all()这时并没有等待返回完整的数据就执行了.then(),没有等到resolve就开始执行了。
说明这里面出现了异常,而这个异常就是由于Promise.all()内的参数,存在函数,造成this混淆,所以我们要使用对象,更准确的说法就是实例。
注意:
以这段代码为例:
在上面的方法中,promise数组中所有的promise实例都变为resolve的时候,该方法才会返回,并将所有结果传递results数组中。promise数组中任何一个promise为reject的话,则整个Promise.all调用会立即终止,并返回一个reject的新的promise对象。reject使用示例如下:
原文链接:https://www.f2er.com/js/31134.html