一文帮你把脉:了解自己的Promise功底(Promise笔试题)

  • 一文帮你把脉:了解自己的Promise功底(Promise笔试题)已关闭评论
  • 35 次浏览
  • A+
所属分类:Web前端
摘要

文本已开启银杏化模式,题目难度从简入难,非常银杏 ——————————————————————————————————————————————————————————————————————————————————–

文本已开启银杏化模式,题目难度从简入难,非常银杏

 

1.1 题目一

const promise1 = new Promise((resolve, reject) => {   console.log('promise1') }) console.log('1', promise1);

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------先自己作答,别偷看答案-------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

解析过程:

  • 从上至下,先遇到new Promise执行该构造函数中的代码promise1
  • 然后执行同步代码1,此时promise1没有被resolve或者reject,因此状态还是pending

结果:

'promise1' '1' Promise{<pending>}

 

 

1.2 题目二

const promise = new Promise((resolve, reject) => {   console.log(1);   resolve('success')   console.log(2); }); promise.then(() => {   console.log(3); }); console.log(4);

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------先自己作答,别偷看答案-------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

解析过程:

    

  • 从上至下,先遇到new Promise,执行其中的同步代码1
  • 再遇到resolve('success'), 将promise的状态改为了resolved并且将值保存下来
  • 继续执行同步代码2
  • 跳出promise,往下执行,碰到promise.then这个微任务,将其加入微任务队列
  • 执行同步代码4
  • 本轮宏任务全部执行完毕,检查微任务队列,发现promise.then这个微任务且状态为resolved,执行它。

 

结果:

1 2 4 3

 

 

 

1.3 题目三

const promise = new Promise((resolve, reject) => {   console.log(1);   console.log(2); }); promise.then(() => {   console.log(3); }); console.log(4);

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------先自己作答,别偷看答案-------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

解析过程:

  • 和题目二相似,只不过在promise中并没有resolve或者reject
  • 因此promise.then并不会执行,它只有在被改变了状态之后才会执行。

结果:

1 2 4

 

 

 

1.4 题目四

const promise1 = new Promise((resolve, reject) => {   console.log('promise1')   resolve('resolve1') }) const promise2 = promise1.then(res => {   console.log(res) }) console.log('1', promise1); console.log('2', promise2);

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------先自己作答,别偷看答案-------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

解析过程:

  • 从上至下,先遇到new Promise,执行该构造函数中的代码promise1
  • 碰到resolve函数, 将promise1的状态改变为resolved, 并将结果保存下来
  • 碰到promise1.then这个微任务,将它放入微任务队列
  • promise2是一个新的状态为pendingPromise
  • 执行同步代码1, 同时打印出promise1的状态是resolved
  • 执行同步代码2,同时打印出promise2的状态是pending
  • 宏任务执行完毕,查找微任务队列,发现promise1.then这个微任务且状态为resolved,执行它。

结果:

'promise1' 
'1' Promise{<resolved>: 'resolve1'}
'2' Promise{<pending>}
'resolve1'

 

 

1.5 题目五

const fn = () => (new Promise((resolve, reject) => {   console.log(1);   resolve('success') })) fn().then(res => {   console.log(res) }) console.log('start')

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------先自己作答,别偷看答案-------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

解析过程:

fn函数它是直接返回了一个new Promise的,而且fn函数的调用是在start之前,所以它里面的内容应该会先执行。

结果:

 

1
'start'
'success'

 

 

1.6 题目六

const fn = () =>   new Promise((resolve, reject) => {     console.log(1);     resolve("success");   }); console.log("start"); fn().then(res => {   console.log(res); });

 

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------先自己作答,别偷看答案-------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

解析过程:

现在start就在1之前打印出来了,因为fn函数是之后执行的。

注:之前我们很容易就以为看到new Promise()就执行它的第一个参数函数了,其实不然,就像这两道题中,我们需要注意它是否被包裹在函数当中,如果是,只有在函数调用的时候才执行。

 

结果:

 

"start"

1

"success"

 未完待续...