Promise - then参数回调函数返回值为Promise对象时产生的两次微任务说明

缺乏、安全感 2023-09-29 14:09 23阅读 0赞

[【JS】因两道Promise执行题让我产生自我怀疑，从零手写Promise加深原理理解 - 听风是风 - 博客园 (cnblogs.com)][JS_Promise_Promise_ - _ - _ _cnblogs.com]

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);
    })

一开始做这题我给出的答案是：0 1 4 2 3 5 6

给出这个答案是因为我对于then参数回调函数返回值与then方法返回值的关系的理解不够透彻。我虽然知道：

1.  当then参数回调函数返回值res为非Promise类型对象时，则then方法返回的Promise对象的状态为fulfilled，结果值为res
2.  当then参数回调函数返回值res为Promise类型对象时，则then方法返回的Promise对象thenRes的状态为res的状态，结果值为res的结果值

对于2，我们要需要更加深入了解如下问题：

res与thenRes是否为同一个对象？

![702ffcb83661435bb4e3a369dc869e61.png][]

通过以上例子验证，res和thenRes并非同一个对象。

thenRes如何实现与res状态相同，结果值相同？（第一次微任务关键点）

thenRes = new Promise((resolve, reject) => {
        res.then(data => resolve(data), reason => reject(reason))
    })

通过以上方式就可以创建一个状态和结果值与res相同的新的Promise对象thenRes。

我们知道即使调用then的promise对象是非pending的，promise.then也不会直接调用then的参数回调函数，而是将参数回调函数加入异步微任务队列，等待同步代码执行完后，异步地执行。这意味着4的打印会延迟一次，即最终打印结果为0 1 2 4 3 5 6

但是实际上该段代码的执行结果为

![2f74698b9da04c23a885a8d8eb02a449.png][]

这意味着实际上4的打印还要再延迟一次，即还有一次微任务产生，那么到底是哪里产生的呢？实际上只有两种可能：

1.  Promise.resolve(4)产生的，可能Promise.resolve静态方法内部会产生一次微任务
2.  return Promise.resolve(4)产生的，即还是then内部产生的，可能除了Promise对象复制产生的一次微任务外，还有一次不知道啥地方产生的微任务

验证方式也很简单，只需要将代码中return Promise.resolve(4) 变动一下即可：

![673746a6b45843209426953902c869e3.png][]

Promise.resolve静态方法作用是快速创建一个fulfilled状态的promise对象， 底层实现还是使用的new Promise方式，为了避免Promise.resolve内部存在隐藏逻辑，我们直接new Promise，发现其实没有影响，最终输出结果不变。

![b586585619ad4db8bd9bb2746cafa28c.png][]

当我们直接return 4时，则会减少一次由于Promise对象复制产生的then开启的微任务，理论上应该打印出来是 0 1 2 4 3 5 6,但是时机结果却是 0 1 4 2 3 5 6，即直接减少了两次微任务。

说明 return "Promise对象"，会开启两次微任务，一次是Promise对象复制的then调用，一次是隐式的开启的。

至于return "Promise对象"的隐式开启的微任务作用是啥，为啥要多开启一次几乎无意义的微任务，大家可以参考下[(6 封私信) promise.then 中 return Promise.resolve 后，发生了什么？ - 知乎 (zhihu.com)][6 _ promise.then _ return Promise.resolve _ - _ _zhihu.com]

中各个大神的解释，反正

最终结论：then方法参数回调函数返回Promise对象是会开启两次微任务：

*  Promise对象状态和结果值复制触发的then
 *  隐式开启的微任务

最终现象是：若then方法的参数回调函数的返回值为Promise对象，则会影响then方法返回值Promise对象的pending状态延迟2个微任务后改变。

另外不仅仅是then参数回调函数的返回值为Promise对象会开启两次微任务，对于excutor执行器的形参resolve，reject函数，如果它们也接受道一个Promise对象为入参，则同样会开启两次微任务，见如下笔试题：

![27251ae519f44af79110da30b20ba38e.png][]

道理是一样的。

另外需要注意的是对于 Promise.resolve静态方法而言：

*  如果入参是一个非Promise对象的值res，则返回一个fulfilled状态，结果值为res的Promise对象
 *  如果入参是一个Promise对象res，则直接返回该res

验证如下

![372899ddbea344db903ec3591ba2ba24.png][]

所以总结如下

*  Promise.prototype.then的参数回调函数，以及Promise\#resolve方法，当他们入参为一个Promise对象时，内部会开启两次微任务
 *  Promise.resolve，当入参为Promise对象时，会直接返回该入参Promise对象

[JS_Promise_Promise_ - _ - _ _cnblogs.com]: https://www.cnblogs.com/echolun/p/15890147.html
[702ffcb83661435bb4e3a369dc869e61.png]: https://img-blog.csdnimg.cn/702ffcb83661435bb4e3a369dc869e61.png
[2f74698b9da04c23a885a8d8eb02a449.png]: https://img-blog.csdnimg.cn/2f74698b9da04c23a885a8d8eb02a449.png
[673746a6b45843209426953902c869e3.png]: https://img-blog.csdnimg.cn/673746a6b45843209426953902c869e3.png
[b586585619ad4db8bd9bb2746cafa28c.png]: https://img-blog.csdnimg.cn/b586585619ad4db8bd9bb2746cafa28c.png
[6 _ promise.then _ return Promise.resolve _ - _ _zhihu.com]: https://www.zhihu.com/question/453677175
[27251ae519f44af79110da30b20ba38e.png]: https://img-blog.csdnimg.cn/27251ae519f44af79110da30b20ba38e.png
[372899ddbea344db903ec3591ba2ba24.png]: https://img-blog.csdnimg.cn/372899ddbea344db903ec3591ba2ba24.png