学习过程中遇到的一些基础的Promise、async、await面试题整理。
出题目的：
- 考察 Promise、async、await 的基础
- 考察队Event Loop、宏任务、微任务的理解
知识点：
- JS 执行顺序：单线程，自上而下、先同步后异步、先微任务后宏任务
- new promise() -> Promise.resolve()，触发then
- new promise((reject)=>{reject()}) -> promise.reject()，触发catch
- then 和 catch 内部没有 throw new Error 相当于 resolve
- async function 相当于返回 Promise.resolve()
- await 后面的代码都是异步的，微任务；setTimeout是宏任务
- 初始化Promise时，函数内部代码会被立即执行
代码：
考点1：Promise.resolve、Promise.reject执行顺序
Promise.resolve().then(() => {
// 优先寻找then
console.log(1);
}).catch(() => {
console.log(2);
})
// 1
Promise.reject().then(() => {
// 优先寻找catch
console.log(1);
}).catch(() => {
console.log(2);
})
// 2
考点2：then 和 catch 内部没有 throw new Error() 相当于 resolve
Promise.resolve().then(() => {
console.log(1);
}).catch(() => {
console.log(2);
}).then(() => {
console.log(3);
})
// 1 3
Promise.reject().then(() => {
console.log(1);
}).catch(() => {
console.log(2);
}).then(() => {
console.log(3);
})
// 2 3
Promise.reject().then(() => {
console.log(1);
}).catch(() => {
console.log(2);
throw new Error();
}).then(() => {
console.log(3);
})
// 2 报错
Promise.reject().then(() => {
console.log(1);
}).catch(() => {
console.log(2);
throw new Error();
}).then(() => {
console.log(3);
}).catch(() => {
console.log(4);
})
// 2 4
考点3：async function -> 相当于返回一个 Promise.resolve
const res = async function fn() {
return 100;
}
console.log(res()); // 返回一个resolve状态的Promise对象 Promise {<fulfilled>: 100}
res().then(()=>{
console.log(0);
}).catch(()=>{
console.log(1);
})
// 0
(async function () {
const a = fn();
const b = await fn();
console.log(a); // Promise {<fulfilled>: 100}
console.log(b); // 100
})()
考点4： await 代码执行顺序
async function fn1() {
console.log("fn1 start");
await fn2();
console.log("fn1 end");
}
async function fn2() {
console.log("fn2 start");
}
console.log("start");
fn1();
console.log("end");
/**
* 打印顺序：
* start
* fn1 start
* fn2 start
* end
* fn1 end
*/
async function fn1() {
console.log("fn1 start");
await fn2();
console.log("fn1 end");
await fn3();
console.log("fn3 end");
}
async function fn2() {
console.log("fn2");
}
async function fn3() {
console.log("fn3");
}
console.log("start");
fn1();
console.log("end");
/**
* 打印顺序：
* start
* fn1 start
* fn2
* end
* fn1 end
* fn3
* fn3 end
*/
考点5：Promise 与 setTimeout 执行顺序
console.log("start");
setTimeout(()=>{
console.log("setTimeout")
});
Promise.resolve().then(()=>{
console.log("Promise")
})
console.log("end")
/**
* 打印顺序：
* start
* end
* Promise
* setTimeout
*/
async function fn1() {
console.log("fn1 start");
await fn2();
console.log("fn1 end"); // await后面的代码为"微任务代码"
}
async function fn2() {
console.log("fn2");
}
console.log("start");
setTimeout(()=>{
console.log("setTimeout"); // 宏任务
});
fn1();
console.log("end");
/**
* 打印顺序：
* start
* fn1 start
* fn2
* end
* fn1 end
* setTimeout
*/