前言
一般遇到Promise.resolve()时,相当于new Promise(resolve => {resolve()})都是同步完成的,不会消耗微任务。
特殊情况
- resolve或者return一个Promise对象:多两个微任务.then().then()
- return Promise.resolve(Promise.resolve(Promise.resolve(4)))嵌套多层Promise :多两个微任务.then().then()
首先摆出结论,之后再举例
结论
在chrome内部实现的Promise和标准的Promise/A+规范存在差异。浏览器内部实现的区别。我们可以理解为,resolve或者return遇到一个Promise对象时,得到这个Promise的值之后,会把这个值用微任务包装起来,在return值向外传递(因为后边没有.then()了,所以是向父级的外层传递)时,会产生第二个微任务。
这样理解的,核心就是会比正常的return一个非Promise的值时,多两个微任务.then().then()
举例1
所以代码1
//代码1
new Promise(resolve => {
resolve(Promise.resolve(4));//resolve了一个Promise
})
.then((res) => {
console.log(res)
})
可以理解为
new Promise(resolve => {
resolve(4);
})
.then()
.then()
.then((res) => {
console.log(res)
})
举例2
//代码2
Promise.resolve().then(() => {
return Promise.resolve(4);//return了一个Promise
})
.then((res) => {
console.log(res)
})
可以理解为
Promise.resolve()
.then(() => {
return 4;
})
.then()
.then()
.then((res) => {
console.log(res)
})
举例3
Promise.resolve().then(() => {
return Promise.resolve(Promise.resolve(Promise.resolve(4)))
})
.then(res => {
console.log(res);
})
可以理解为
Promise.resolve()
.then(() => {
return 4;
})
.then()
.then()
.then((res) => {
console.log(res)
})
像这样的return Promise.resolve(Promise.resolve(Promise.resolve(4)))嵌套多层Promise,其实和Promise.resolve(4)是一样的,并不会多产生微任务。因为这两段代码的Promsie状态变为fulfilled的过程并不需要等待。而是拿到它的值之后,在向后运行的时候,会产生微任务。
看个题目
Promise.resolve().then(() => {
console.log(0);
return Promise.resolve(4);
}).then((res) => {
console.log(res)
})
Promise.resolve().then(() => {
console.log(1);
}).then(() => {
console.log(2);
}).then(() => {
console.log(3);
}).then(() => {
console.log(5);
}).then(() =>{
console.log(6);
})
则,可以转化为
Promise.resolve().then(() => {
console.log(0);
return 4;
})
.then()
.then()
.then((res) => {
console.log(res)
})
Promise.resolve().then(() => {
console.log(1);
}).then(() => {
console.log(2);
}).then(() => {
console.log(3);
}).then(() => {
console.log(5);
}).then(() =>{
console.log(6);
})
所以运行结果是0,1,2,3,4,5,6