2022-10-27 星期四
原谅自己,我不是那么厉害的人,做不到就做不到,没啥大不了的。
Promise输出专项练习，相信你在弄懂了这几道打印输出后，会对Promise(微任务)的代码执行顺序有一个较清晰的认识,后续会继续补充。
1. Promise demo1
const promise1 = new Promise((resolve,reject)=>{
console.log('promise1')
})
console.log('1',promise1)
参考答案
答案是:
promise1
1 Promise{<pending>}
先执行构造函数中的代码promise1，然后执行同步代码 1，由于没有resolve或者reject，此时状态为pending.
2. Promise demo2
const promise = new Promise((resolve,reject)=>{
console.log(1)
resolve('success')
console.log(2)
})
promise.then(()=>{
console.log(3)
})
console.log(4)
参考答案
答案是:
1
2
4
3
- 首先执行同步代码，打印出1
- 接着resolve的出现，只是将promise的状态改变成了resolved，并且将success这个值保存了下来。
- 会接着执行同步代码，输出2
- promise.then是一个微任务，放入到微任务列表，等待宏任务执行完毕后，再执行微任务列表
- 继续执行本轮的宏任务，输出4
- 接着本轮宏任务执行完毕，检查微任务列表发现了这个promise…then，执行输出3
3. Promise demo3
const promise = new Promise((resolve, reject) => {
console.log(1);
console.log(2);
});
promise.then(() => {
console.log(3);
});
console.log(4);
参考答案
答案是:
1
2
4
- 在promise中因为没有resolve或者reject，因此promise.then不会执行,即不会打印3
4. Promise demo4
const promise1 = new Promise((resolve, reject) => {
console.log('1')
resolve('2')
})
const promise2 = promise1.then(res => {
console.log(res)
})
console.log('3', promise1);
console.log('4', promise2);
参考答案
答案是:
1
3 Promise {<fulfilled>: '2'}
4,Promise {<pending>}
2
const promise1 = new Promise((resolve, reject) => {
console.log('promise1') // 1 执行构造函数中代码，打印输出
resolve('resolve1') // 2 将promise1状态改为resolved，并将结果保存下来
})
const promise2 = promise1.then(res => { // 3. 将这个微任务，放入到微任务队列
console.log(res) // 6.执行微任务，打印出结果 resolve1
})
console.log('1', promise1); //4 打印出promise1的状态为 resolved
console.log('2', promise2); //5 打印出promise2的状态为 pending，宏任务执行完毕，寻找微任务队列,去到步骤6
5.Promise demo5
const fn = () => (new Promise((resolve, reject) => {
console.log(1)
resolve('success')
}))
fn().then(res => {
console.log(res)
})
console.log('start')
参考答案
答案是:
1
start
success
const fn = () => (new Promise((resolve, reject) => {
console.log(1); //2.执行同步代码，打印1
resolve('success') //3.更新fn的状态为resolved的Promise，且保存其值
}))
fn().then(res => { // 1.执行fn函数，.then为微任务列表，等待本轮宏任务执行完毕来检查
console.log(res) // 4执行完，发现有微列表，打印success
})
console.log('start') // 4 本来宏任务，打印4
6.Promise demo6
const fn = () => new Promise((resolve, reject) => {
console.log(1);
resolve("success");
});
console.log("start");
fn().then(res => {
console.log(res);
});
参考答案
答案是:
start
1
success
const fn = () =>
new Promise((resolve, reject) => {
console.log(1); // 3.执行fn函数同步代码，打印1
resolve("success"); // 4.将fn的结果Promise状态改为resolved，且保存这个值
});
console.log("start"); // 1.直接打印 start
fn().then(res => { // 2.先去执行调用的fn函数，且将.then存入到微任务列表
console.log(res); // 5.打印保存的这个值 success
});