A compilation of some basic Promise, async, and await interview questions encountered during the learning process.
Question:
- Examine the basics of Promise, async, and await
- Understanding of the expedition team’s Event Loop, macro tasks, and micro tasks
Knowledge points:
- JS execution order: single thread, top-down, synchronization first and then asynchronous, micro-tasks first and then macro-tasks
- new promise() -> Promise.resolve(), trigger then
- new promise((reject)=>{reject()}) -> promise.reject()，触发catch
- There is no throw new Error inside then and catch, which is equivalent to resolve
- async function is equivalent to returning Promise.resolve()
- The code behind await is all asynchronous and micro-tasks; setTimeout is a macro-task
- When initializing a Promise, the code inside the function will be executed immediately
Code:
Test point 1: Promise.resolve, Promise.reject execution sequence
Promise.resolve().then(() => {
// 优先寻找then
console.log(1);
}).catch(() => {
console.log(2);
})
// 1
Promise.reject().then(() => {
// 优先寻找catch
console.log(1);
}).catch(() => {
console.log(2);
})
// 2
Test point 2: There is no throw new Error() inside then and catch, which is equivalent to 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
Test point 3: async function -> is equivalent to returning a 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
})()
Test point 4: await code execution sequence
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
*/
Test point 5: Promise and setTimeout execution sequence
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
*/