深入浅出现代 JavaScript—微任务和宏任务

「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」

微任务和宏任务的区别

• 微任务和宏任务是异步任务，都是在同步任务执行完毕后再去执行异步任务
• 那么什么是宏任务呢? 当前调用栈中执行的代码成为宏任务,如定时器等
• 微任务又是什么呢? 当前(此次事件循环中)宏任务执行完，在下一个宏任务开始之前需要执行的任务 ，可以理解为回调事件。

Promise 应该是前端面试绕不开的一个知识点，因为这部分内容还是可浅可深的，想要把所详细还需要下一番功夫。不是三言两语就能说清楚的。

const p = new Promise();

Promise 接收一个参数，这个参数是一个函数类型的参数，函数中接收 resolve 和 reject 两个参数。

const p = new Promise(function (resolve, reject) {
    console.log("promise...")
});
console.log(p);

在 Promise 构造函数中，console.log("promise...") 也是的是同步执行。所以当 new Promise 时候，就会立刻执行 console.log("promise..") 语句。

Promise {<pending>}

    const p = new Promise((resolve, reject) => {
        console.log("promise...")
    })
    p.then(value => console.log(value))
    console.log(p);

当我们在 Promise 上调用 then 方法，并不会立即执行，这是因为现在 Promise 还没有将其放置到微任务。只有调用 resolve 方法这是才会将放到微任务，微任务也是异步，所以其也是在所有同步执行完毕后才开始执行。

const p = new Promise((resolve, reject) => {
    resolve("hello resolve")
    console.log("promise...")
})
p.then(value => console.log(value))
console.log(p);

从下面输出顺序可以看出，hello resolve 是在所有同步任务执行完毕才输出

promise...
Promise {<fulfilled>: 'hello resolve'}
hello resolve

setTimeout(() => {
    console.log("setTimeout")
}, 0);
const p = new Promise((resolve, reject) => {
    resolve("hello resolve")
    console.log("promise...")
})
p.then(value => console.log(value))
console.log(p);

从上面代码来看微任务是优先于宏任务执行，在执行完微任务后才去执行红任务

promise...
Promise {<fulfilled>: 'hello resolve'}
hello resolve
Live reload enabled.
setTimeout

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log("setTimeout")
        resolve("hello resolve")
    }, 0);
    console.log("promise...")
})
p.then(value => console.log(value))
console.log(p);

这里我们将微任务 resolve 放置到了宏任务中，那么就会先执行宏任务的语句然后再去执行内嵌在宏任务里的微任务。

promise...
Promise {<pending>}
Live reload enabled.
setTimeout
hello resolve