异步编程面试题解析

1、字节跳动面试题

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(function () {
  console.log("setTimeout");
}, 0);
async1();
new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("promise2");
});
console.log("script end");

解析：

async function async1() {
  console.log("async1 start");
  // 6、控制台打印 async1 start
  await async2();
  // 7、先执行 async2
  // 8、下面的代码需要等待返回正确的 Promise 后才执行(异步|微任务)（添加微任务1）
  console.log("async1 end");
  // 15、执行微任务1 控制台打印 async1 end
}
// 1、创建一个 async1 函数

async function async2() {
  console.log("async2");
  // 9、控制台打印 async2
}
// 2、创建一个 async2 函数

console.log("script start");
// 3、控制台打印 script start

setTimeout(function () {
  console.log("setTimeout");
  // 17、控制台输出 setTimeout
}, 0);
// 4、设置一个定时器 （添加宏任务1）

async1();
// 5、执行 async1

new Promise(function (resolve) {
  console.log("promise1");
  // 11、控制台打印 promise1
  resolve();
  // 12、添加微任务2
}).then(function () {
  console.log("promise2");
  // 16、执行微任务2 控制台打印 promise2
});
// 10、立即执行 new Promise

console.log("script end");
// 13、控制台打印 script end
// 14、清空微任务
// 15、执行一个宏任务

// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

总结：

• 微任务包括 process.nextTick ，promise ，MutationObserver，其中 process.nextTick 为 Node 独有。
• 宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。

这里很多人会有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 script ，浏览器会先执行一个宏任务，接下来有异步代码的话才会先执行微任务。

2、涉及到 for 循环异步编程题

console.log(1);
setTimeout((_) => {
  console.log(2);
}, 1000);
async function fn() {
  console.log(3);
  setTimeout((_) => {
    console.log(4);
  }, 20);
  return Promise.reject();
}
async function run() {
  console.log(5);
  await fn();
  console.log(6);
}
run();
// 需要执行150MS左右
for (let i = 0; i < 90000000; i++) {}
setTimeout((_) => {
  console.log(7);
  new Promise((resolve) => {
    console.log(8);
    resolve();
  }).then((_) => {
    console.log(9);
  });
}, 0);
console.log(10);

解析

console.log(1);
// 1、输出 1

setTimeout((_) => {
  console.log(2);
  // 22、输出 2
}, 1000);
// 2、添加 宏任务1

async function fn() {
  console.log(3);
  // 8、输出 3
  setTimeout((_) => {
    console.log(4);
    // 输出 4
  }, 20);
  // 9、添加一个 宏任务2
  return Promise.reject();
}
// 3、初始化函数fn
async function run() {
  console.log(5);
  // 6、输出 5
  await fn();
  // 7、执行fn
  // 8、添加一个 微任务1
  console.log(6);
  // 13、上面返回的失败状态，所以上面代码不执行
}
// 4、初始化函数 run
run();
// 5、执行run函数

// 需要执行150MS左右
for (let i = 0; i < 90000000; i++) {}
// 9、执行循环 150ms (之前设置的定时器到时候，但是要继续把同步任务执行完)

setTimeout((_) => {
  console.log(7);
  // 16、输出 7
  new Promise((resolve) => {
    console.log(8);
    // 17、执行promise 输出 8
    // 18、添加一个微任务2
    resolve();
  }).then((_) => {
    console.log(9);
    // 20、输出 9
  });
}, 0);
// 10、添加一个 宏任务3
console.log(10);
// 11、输出 10
// 12、执行一队微任务  执行微任务1
// 14、执行一个宏任务  找到最需要执行的宏任务(定时器到时) 执行宏任务2
// 15、没有微任务 再执行一个宏任务(定时器到时) 执行宏任务3
// 19、执行一队微任务 执行微任务2
// 21、执行一个宏任务(等待定时器到时执行) 执行宏任务1

// 1
// 5
// 3
// 10
// 4
// 7
// 8
// 9
// 2

总结：

• await fun(); 当前这一行代码立即执行，而它的异步是下面的代码需要fn返回成功态才会执行（但是此时不等，列为任务队列中的微任务），若返回失败状态，后面的代码不执行。