Promise，async，await 面试题

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); // 1return 2; // 没用被用到
}async function fun3() {const n = fun2(); // 注意没有 awaitconsole.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 bconsole.log(a)console.log('after1')await aresolve(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')
})