宏任务与微任务

一、调用栈和任务队列

        JS是单线程的，它的运行是基于事件循环机制（event loop）

        1. 调用栈

                （1）栈：栈是一种数据结构，后进先出。

                （2）调用栈中存放的是要执行的代码。

        2. 任务队列

                （1）队列：队列是一种结构，先进先出

                （2）任务队列的是将要执行的代码

                （3）当调用栈中的代码执行完毕后，队列中的代码才会按照顺序依次进入到栈中执行

                （4）在JS中任务队列有两种

                        ① 宏任务队列（大部分代码都去宏任务队列中去排队）

                        ② 微任务队列（Promise的回调函数（then、catch、finally））

                （5） 整个流程

                        ① 执行调用栈中的代码

                        ② 执行微任务队列中的所有任务

                        ③ 执行宏任务队列中的所有任务

        // 开启一个定时器
        // 定时器的作用是间隔一段时间后，将函数放入到任务队列的宏任务中
        // 等待调用栈中的代码执行完再执行任务队列中的代码
        setTimeout(() => {
            console.log(1);
        }, 0);

        console.log(2);
        // 先输出2再输出1

二、Promise的执行原理

        Promise在执行，then就相当于给Promise了回调函数，当Promise的状态从pending变为fulfilled时，then的回调函数会被放入到任务队列的微任务队列中。

        setTimeout(() => {
            console.log(1);
        }, 0);

        console.log(2);

        Promise.resolve('').then(() => console.log(3));
        // 先输出2，再输出3，最后输出1

 三、queueMicrotask()

        用来向微任务队列中添加一个任务

        Promise.resolve().then(() => {
            setTimeout(() => {
                console.log("微任务中的宏任务数据");
            })
        })

        Promise.resolve().then(() => {
            Promise.resolve().then(() => {
                console.log("微任务中的微任务数据");
            })
        })

        setTimeout(() => {
            console.log("宏任务中的数据");
        }, 0)

        queueMicrotask(() => {
            console.log("微任务中的数据");
        })

        console.log("执行栈中的数据");

分析：