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. 首先执行同步代码,打印出1
  2. 接着resolve的出现,只是将promise的状态改变成了resolved,并且将success这个值保存了下来。
  3. 会接着执行同步代码,输出2
  4. promise.then是一个微任务,放入到微任务列表,等待宏任务执行完毕后,再执行微任务列表
  5. 继续执行本轮的宏任务,输出4
  6. 接着本轮宏任务执行完毕,检查微任务列表发现了这个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
});

题目来源 (opens new window)