Promise，async，await 面试题

目录

• 5，面试题
• • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

推荐先看Promise 相关知识点

5，面试题

1

结果 1，5，2，3，4

const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log(2);
    resolve();
    console.log(3);
  });
});

promise.then(() => {
  console.log(4);
});

console.log(5);

因为 then() 中的回调函数虽然是微任务，但也得等到 promise 变为 fulfilled 状态才会执行。

2

结果 1，3，2

async function fun() {
  console.log(1); // 同步
  const n = await 2;
  console.log(n);
}

fun();
console.log(3);

因为 fun() 函数中的同步语句会直接执行，异步的才会延迟执行。

// 相当于
function fun() {
  console.log(1);
  Promise.resolve(2).then((n) => {
    console.log(n);
  })
}

3

结果 1，4，2，3

async function fun() {
  console.log(1); // 同步
  const n = await 2;
  console.log(n);
}

(async () => {
  await fun();
  console.log(3);
})();

console.log(4);

同理，立即执行函数执行后，await fun() 中的同步代码先执行，异步代码进入微队列等待执行。所以先输出 1 后输出 4。

4

结果 Promise {<pending>}，Promise {<pending>}，4，1，3，1

async function fun1() {
  return 1;
}

async function fun2() {
  const n = await fun1();
  console.log(n); // 1
  return 2; // 没用被用到
}

async function fun3() {
  const n = fun2(); // 注意没有 await
  console.log(n);
  return 3;
}

fun3().then((n) => {
  console.log(n); // n 是 fun3 的返回值 3
});

fun3();

console.log(4);

1，先看同步代码的执行。

• 第1个 fun3() 执行，会执行 fun2()，再执行 await fun1()，会将 async fun1 返回的 Promise 对象的后续处理，放到微队列中等待执行（任务1）。

const n = await fun1();
console.log(n);

// 相当于
new Promise((resolve) => {
  resolve(1)
}).then((n) => {
  console.log(n);
})

• 因为 fun2 被 async 修饰，而且还有异步代码，所以此时 fun2() 执行的结果是一个 pending 状态的 Promise 对象，所以输出 Promise {<pending>}，fun3() 的后续处理：then() 的回调函数进入微队列等待执行（任务2）。
• 第2个 fun3() 执行，再次输出 Promise {<pending>}，并添加微任务3
• 输出 4。

2，接下来看异步代码的执行。

• 执行微队列中的任务1输出 1，任务2输出 3，任务3输出 1

5

结果 1

Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log)

参考 3.2 的知识点。then() 的参数不是函数，说明没有对前一个任务做后续处理，相当于无效代码。

// 等价
Promise.resolve(1).then(console.log)

6

结果：promise1，undefined，end，promise2，promise3，promise4，Promise {<pending>}，after1

var a
var b = new Promise((resolve, reject) => {
  console.log('promise1')
  setTimeout(() => {
    resolve()
  }, 1000)
})
  .then(() => {
    console.log('promise2')
  })
  .then(() => {
    console.log('promise3')
  })
  .then(() => {
    console.log('promise4')
  })

a = new Promise(async (resolve, reject) => {
  console.log(a)
  await b
  console.log(a)
  console.log('after1')
  await a
  resolve(true)
  console.log('after2')
})
console.log('end')

注意，b 和 a 都是右边 Promise 执行的结果。右边先执行，再赋值给左边的变量。

1，先看同步代码执行

• 执行 b 右边的表达式，输出 promise1，setTimeout 的回调函数进入宏队列等待执行。此时 b 被赋值为一个 pending 状态的 Promise 对象。
• 执行 a 右边的表达式，输出 undefined（此时 a 未赋值）。
• 执行 await b，因为此时 b 是 pending 状态，所以后续代码都不会执行，所以 a 也被赋值为一个 pending 状态的 Promise 对象。
• 输出 end

2，再看异步代码执行

• 没有微队列，所以执行宏队列中 setTimeout 的回调函数，将 b 变为 fulfilled 状态，接着执行后续 3个 then()，依次输出 promise2，promise3，promise4。
• 现在 b 变为 fulfilled 状态，所以 await b 执行完成，开始执行后续代码。
• 注意到 a 现在还是一个 pending 状态的 Promise 对象，所以输出 Promise {<pending>} ，再输出 after1
• 执行 await a，将永远等待，因为没有更改状态的机会。

7

结果 script start，async1 start，async2，p1，script end，async1 end，p2，settimeout

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}

async function async2() {
  console.log('async2')
}

console.log('script start')

setTimeout(() => {
  console.log('settimeout')
}, 0)

async1()

new Promise(function (resolve) {
  console.log('p1')
  resolve()
}).then(function () {
  console.log('p2')
})

console.log('script end')

1，先看同步代码执行

• 输出 script start，setTimeout 的回调函数进入宏队列等待执行。
• 执行 async1()，输出 async1 start。
• 执行 await async2() 中的同步代码，输出 async2。await async2() 之后的代码，相当于在 then() 的回调函数中执行，所以进入微队列等待。

await async2()
console.log('async1 end')

async function async2() {
  console.log('async2')
}

// 相当于
new Promise((resolve) => {
  console.log('async2')
  resolve()
}).then(() => {
  console.log('async1 end')
})

• 输出 p1，then() 的回调函数进入微队列等待。
• 输出 script end

2，再看异步代码执行。

• 先执行微队列中的任务，输出 async1 end，再输出 p2。
• 再执行宏队列中的任务，输出 settimeout。

---

以上。