学习过程中遇到的一些基础的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(() => {  // 优先寻找thenconsole.log(1);}).catch(() => {console.log(2);})// 1

Promise.reject().then(() => {  // 优先寻找catchconsole.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*/