JS事件循环探究（下）

前端学习 评论

作者：吕灿发
链接：https://juejin.cn/post/7262347509951283259
来源：稀土掘金

Promise.reslove().then(){}中的返回值的三种情况：

  1. 基本数据类型
  2. 带then方法的对象
  3. Promise.reslove(*)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 基本数据类型
Promise.resolve()
    .then((res) => {
        console.log(0);
        return 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);
    })
    
// 0142356
1
2
3
4
5
6
// 带then方法的对象
return {
	then: function (resolve) {
	resolve(4)
}
// 0124356
1
2
3
// Promise.reslove(4)
	return Promise.reslove(4)
// 0123456

为什么不同的return 值会产生不同的执行顺序？

微任务的执行顺序是根据它们的注册顺序执行的

.then(){}中的 return 其实是一个Promise.reslove()包装后的值

在第一种情况：

执行顺序为：

1
2
3
4
5
6
-  执行 P1.then(0)完毕，返回一个Promise.reslove(4)，注册 P1.then(0){}.then(4)
-  执行 P2.then(1)，注册 P2.then(1){}.then(2)
-  执行 P1.then(0){}.then(4)，不再有新的then注册
-  执行 P2.then(1){}.then(2)，注册 P2.then(1){}.then(2){}.then(3)
-  P2继续执行
-  输出为：0、1、4、2、3、5、6

第二种情况

执行顺序为：

1
2
3
4
5
6
7
8
9
10
11
12
13
-  执行 P1.then(0)，返回一个
    Promise.reslove({
        then: function(reslove){
            reslove(4)
        }
    })
-  执行 P2.then(1)，注册 P2.then(1){}.then(2)
-  执行 Promise.reslove.then(reslove)，注册 P1.then(0){}.then(4)
-  执行 P2.then(1){}.then(2)，注册 P2.then(1){}.then(2){}.then(3)
-  执行 P1.then(0){}.then(4)，不再有新的then注册
-  执行 P2.then(1){}.then(2){}.then(3)，注册 P2.then(1){}.then(2){}.then(3){}.then(4)
-  P2继续执行
-  输出为：0、1、2、4、3、5、6

第三种情况

执行顺序为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
-  执行 P1.then(0)，返回一个 Promise.reslove(Promise.reslove(4))
-  执行 P2.then(1)，注册 P2.then(1){}.then(2)
-  执行 Promise.reslove(Promise.reslove(4))，返回一个Promise.reslove(4)。
   内层的 Promise.reslove(4)没有.then注册
-  执行 P2.then(1){}.then(2)，注册 P2.then(1){}.then(2){}.then(3)
-  执行 Promise.reslove(4)，注册外层的 P1.then(0){}.then(4)
-  执行 P2.then(1){}.then(2){}.then(3)，
   注册 P2.then(1){}.then(2){}.then(3){}.then(4)
-  执行 P1.then(0){}.then(4)，不再有新的then注册
-  执行 P2.then(1){}.then(2){}.then(3){}.then(4)，
   注册 P2.then(1){}.then(2){}.then(3){}.then(4){}.then(5)
-  执行 P2.then(1){}.then(2){}.then(3){}.then(4){}.then(5)，
   注册 P2.then(1){}.then(2){}.then(3){}.then(4){}.then(5){}.then(6)
-  执行 P2.then(1){}.then(2){}.then(3){}.then(4){}.then(5){}.then(6)，
   没有新的.then 注册
-  输出为：0、1、2、3、4、5、6

总结：return的值中，1. 基础数据类型则在此次执行中注册下一个then。 2. { then : function(reslove){} }则在此次执行后的下一次再注册下一个then。 3. Promise.reslove(基础数据类型) 则加多一次，下两次才注册

枫与风