通过案例，分析Promise的执行结果

第一题

题目

写出下面代码的执行结果

javascript Promise.resolve().then(() => { console.log('promise1'); const timer2 = setTimeout(() => { console.log('timer2') }, 0) }); const timer1 = setTimeout(() => { console.log('timer1') Promise.resolve().then(() => { console.log('promise2') }) }, 0) console.log('start');

执行步骤

• 首先，代码按照顺序执行，自身就是一个宏任务
• Promise.resolve().then是一个微任务，加入微任务队列
• 执行timer1，它是一个宏任务，加入宏任务队列
• 继续执行下面的同步代码，打印出start
• 第一轮宏任务就执行完了
• 开始执行微任务，打印出promise1
• 遇到timer2，它是一个宏任务，将其加入宏任务队列(timer1、timer2)
• 第一轮的微任务就执行完了
• 开始执行第二轮宏任务
• 执行定时器timer1,打印timer1
• 遇到Promise，它是一个微任务，加入微任务队列
• 第二轮宏任务执行完毕
• 开始执行微任务队列中的任务，打印promise2
• 第二轮的微任务执行结束
• 最后执行宏任务timer2定时器，打印出timer2

结果

javascript 'start' 'promise1' 'timer1' 'promise2' 'timer2'

第二题

题目

写出下面代码的执行结果

javascript Promise.resolve().then(() => { return new Error('error!!!') }).then(res => { console.log("then: ", res) }).catch(err => { console.log("catch: ", err) })

执行步骤

• 第一个then 正常处理，返回fulfilled状态的结果
• 第二个then 正常执行，打印结果

你需要知道：

如果回调函数的返回结果是非promise类型的属性，则then方法返回的promise对象的状态为成功fulfilled

因此这里的return new Error('error!!!')被包裹成了return Promise.resolve(new Error('error!!!')), 因此它被then捕获而不是catch。

结果

javascript then: Error: error!!!

第三题

题目

写出下面代码的执行结果

javascript async function async1 () { console.log('async1 start'); await new Promise(resolve => { console.log('promise1') }) console.log('async1 success'); return 'async1 end' } console.log('srcipt start') async1().then(res => console.log(res)) console.log('srcipt end')

执行步骤

• 首先程序打印srcipt start
• 进到async1() 方法，打印async1 start
• 执行await方法，打印promise1，后续代码放入微任务中
• 任务结束，跳出async1()
• 打印script end
• 由于Promise是没有返回值的，微任务中代码无法执行，包括then()

需要注意的是在async1中await后面的Promise是没有返回值的，也就是它的状态始终是pending状态，所以在await之后的内容是不会执行的，也包括async1后面的 .then。

结果

javascript script start async1 start promise1 script end

关于这个题目，有人会质疑

1、async1()是一个普通函数，为什么可以使用then()?

基础没有学好，async定义的函数会默认返回一个Promise对象，所以没问题

2、如何写，才能返回出所有结果？

javascript async function async1 () { console.log('async1 start'); await new Promise(resolve => { console.log('promise1'); resolve(1); }); console.log('async1 success'); return 'async1 end' } console.log('srcipt start') async1().then(res => console.log(res)) console.log('srcipt end')

执行结果 javascript srcipt start async1 start promise1 srcipt end async1 success async1 end