js中的宏任务与微任务

宏任务与微任务

js是一个单线程语言，有同步和异步两种任务状态，JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：

①宏任务（macrotask）：

• 异步 Ajax 请求、
• setTimeout、setInterval、
• 文件操作
• 其它宏任务

② 微任务（microtask）：

• Promise.then、.catch 和 .finally
• process.nextTick
• await
• 其它微任务

宏任务和微任务的执行顺序

• 每一个宏任务执行完之后，都会检查是否存在待执行的微任务。
• 如果有，则执行完本宏任务的所有微任务之后，再继续执行下一个宏任务。

应用场景

在面试题中经常看到这样的例子：

async function async1() {
  console.log("async1 start");  // 1.执行
  await async2();
  console.log("async1 end");	// 8.微任务1执行完进入微任务1-1队列
}
async function async2() {
  console.log("async2");// 2.执行
  await async3();
  console.log("async2 end"); // 4.微任务1进入队列
}
async function async3() {
  console.log("async3"); // 3.执行
}
setTimeout(function () { // 另一个宏任务，先抛出去，下个宏任务再执行
  console.log("setTimeout");
}, 0);
async1();
new Promise(function (resolve) {
  console.log("promise1"); // 5.执行
  resolve();
}).then(function () { // 6.微任务2抛出
  console.log("promise2");
});
console.log("console"); // 7.执行
// 执行微任务 1,2
// 执行微任务 1-1
           

控制台输出：
async1 start
async2
async3
promise1
console
async2 end
promise2
async1 end
setTimeout