Promise执行流程分析

最新推荐文章于 2025-09-29 17:49:51 发布

原创最新推荐文章于 2025-09-29 17:49:51 发布 · 置顶 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #promise

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文解析了一段涉及Promise和setTimeout的JavaScript代码的执行过程，详细说明了Promise的状态转变及微任务与宏任务的执行顺序。

先上代码

console.log(1);
new Promise(function (resolve, reject){
    reject(true);
    window.setTimeout(function (){
        resolve(false);
    }, 0);
}).then(function(){
    console.log(2);
}, function(){
    console.log(3);
});
console.log(4);

输出143

解释：

首先整段js从上到下执行，遇到 console.log(1) 输出了1；
遇到了 new Promise(function(resolve,reject){})。继续往里看，遇到了 reject(true)。此时的
promise的状态由pending变成了rejected。再往下看，是一个setTimeout，setTimeout方法内部的操作将会被丢到下一个宏任务的队列中执行，即使时间为0。
执行完function内部看.then()了。.then()内部的操作将丢到微任务队列里面等待执行。
继续向下看，遇到console.log(4) 输出4
此时这个宏任务已经执行完啦，开始执行微任务。微任务队列中有个 .then(), .then()方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的。此时的promise的状态是rejected，于是走的是第二个function(){}，也就是console.log(3),于是便输出了3
微任务队列也执行完了，开始执行下一轮的宏任务，也就是setTimeout内部的操作，但是此时的resolve(false)并不能改变promise的状态，因为promise的状态一旦改变了就一直保持这个状态不会再发生变化了。