Promise的执行原理——macrotask和microtask

最新推荐文章于 2024-08-06 10:48:11 发布

in_motion

最新推荐文章于 2024-08-06 10:48:11 发布

阅读量1.5k

点赞数

分类专栏： javascript学习文章标签： Promise macrotask microtask 任务队列 setTimeout

本文链接：https://blog.csdn.net/m0_37828249/article/details/80154644

版权

本文深入探讨了Promise的工作机制，重点介绍了宏任务（macrotask）和微任务（microtask）的概念。浏览器按照macrotask-microtask-macrotask的顺序执行任务队列。整个脚本作为一个macrotask，setTimeout生成新的macrotask，而Promise的resolve创建microtask。通过示例说明了Promise中resolve的调用流程，并展示了如何在Promise链中插入定时延迟。

摘要由CSDN通过智能技术生成

要理解Promise的执行原理，首先要知道EMCAScript的任务队列机制——macro-task（宏任务）和micro-task（微任务）。

浏览器先执行一个macrotask，在执行macrotask过程中可能会创建新的macrotask和microtask，然后顺序执行micro-task队列中的全部任务，然后再取出一个macrotask执行……周而复始。整个script代码是一个macrotask，setTimeout会产生一个新的macrotask，Promise对象调用到resolve时会创建一个microtask。想要更细节的理解，传送门Promise的队列与setTimeout的队列有何关联？

下面介绍Promise中resolve的调用机制。

function wash(resolve){
    console.log('开始洗衣服...');
    setTimeout(()=>{
        console.log('洗完了！');
        resolve('一堆洗干净的衣服');
    }, 2000);
}

function hang(clothes){
    console.log('开始晾衣服...');
    /*...晾衣服中...*/
    console.log(clothes+'晾好了！');
    return '一堆晾好的衣服';
}

function dry(clothes){
    console.log('