業(yè)務(wù)開(kāi)發(fā)中經(jīng)常用Promise，但是第一題真不一定能作對(duì)。。。。。emmm，我說(shuō)的是別猶豫的、能非?？隙ǖ慕o出答案的哪種...

作為前端開(kāi)發(fā)，相信日常開(kāi)發(fā)中Promise的使用率應(yīng)該時(shí)最高的，另外面試中js基礎(chǔ)部分考察最多的也莫過(guò)于Promise，所以Promise的重要性咱就不多說(shuō)了。

說(shuō)的那么重要，是不是有點(diǎn)夸張了，想想不就幾個(gè)api嗎？但是真的了解他的運(yùn)行機(jī)制嗎？現(xiàn)在不管是大廠還是小廠，promise 已經(jīng)成為了面試必考知識(shí)點(diǎn)；可是真正掌握了多少，真正面試的時(shí)候，又能有多少把握呢？

平時(shí)大家忙于業(yè)務(wù)開(kāi)發(fā)，很多基礎(chǔ)知識(shí)時(shí)間一長(zhǎng)就容易淡忘，所以本文根據(jù) Promise 的一些知識(shí)點(diǎn)總結(jié)了19道題，看看你能做對(duì)幾道，希望對(duì)你有點(diǎn)幫助。

PS:下面題目沒(méi)有附答案，有了答案想必會(huì)降低大家的思考深度，起不到什么效果，完整答案會(huì)在后面文章單獨(dú)發(fā)出。

主要考察點(diǎn)

• 執(zhí)行順序
• 值透?jìng)?/section>
• 錯(cuò)誤處理
• 返回值
• 鏈?zhǔn)秸{(diào)用

最終考察的還是我們對(duì)promise的理解程度。

目標(biāo)

通關(guān)標(biāo)準(zhǔn)，能夠給出答案，并且給出合理的解釋?！緸槭裁唇o出這個(gè)答案？】

#01

難易程度：???

Promise.resolve(1)
??.then((res)?=>?{
????console.log(res)
????return?2
??})
??.catch((err)?=>?{
????return?3
??})
??.then((res)?=>?{
????console.log(res)
??})

#02

難易程度：?

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

#03

難易程度：???

const?promise1?=?new?Promise((resolve,?reject)?=>?{
??setTimeout(()?=>?{
????resolve('success')
??},?1000)
})
const?promise2?=?promise1.then(()?=>?{
??throw?new?Error('error!!!')
})

console.log('promise1',?promise1)
console.log('promise2',?promise2)

setTimeout(()?=>?{
??console.log('promise1',?promise1)
??console.log('promise2',?promise2)
},?2000)

#04

難易程度：??

setTimeout(()=>?console.log(5),?0);
new?Promise(resolve?=>?{
????console.log(1);
????resolve(3);
????Promise.resolve().then(()=>?console.log(4))
}).then(num?=>?{
????console.log(num)
});
console.log(2);

#05

難易程度：??

const?promise?=?new?Promise((resolve,?reject)?=>?{
??resolve('success1')
??reject('error')
??resolve('success2')
})

promise
??.then((res)?=>?{
????console.log('then:?',?res)
??})
??.catch((err)?=>?{
????console.log('catch:?',?err)
??})

#05

難易程度：??

const?promise?=?new?Promise((resolve,?reject)?=>?{
??setTimeout(()?=>?{
????console.log('once')
????resolve('success')
??},?1000)
})

const?start?=?Date.now()
promise.then((res)?=>?{
??console.log(res,?Date.now()?-?start)
})
promise.then((res)?=>?{
??console.log(res,?Date.now()?-?start)
})

#06

難易程度：???

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

#07

難易程度：????

const?promise?=?Promise.resolve()
??.then(()?=>?{
????return?promise
??})
promise.catch(console.error)

#08

難易程度：???

Promise.resolve(1)
??.then(2)
??.then(Promise.resolve(3))
??.then(console.log)

#09

難易程度：???

Promise.resolve()
??.then(function?success?(res)?{
????throw?new?Error('error')
??},?function?fail1?(e)?{
????console.error('fail1:?',?e)
??})
??.catch(function?fail2?(e)?{
????console.error('fail2:?',?e)
??})

變種后

Promise.resolve()
??.then(function?success1?(res)?{
????throw?new?Error('error')
??},?function?fail1?(e)?{
????console.error('fail1:?',?e)
??})
??.then(function?success2?(res)?{
??},?function?fail2?(e)?{
????console.error('fail2:?',?e)
??})

#10

難易程度：????

process.nextTick(()?=>?{
??console.log('nextTick')
})
Promise.resolve()
??.then(()?=>?{
????console.log('then')
??})
setImmediate(()?=>?{
??console.log('setImmediate')
})
console.log('end')

#11

難易程度：????

const?first?=?()?=>?(new?Promise((resolve,?reject)?=>?{
????console.log(3);
????let?p?=?new?Promise((resolve,?reject)?=>?{
????????console.log(7);
????????setTimeout(()?=>?{
????????????console.log(5);
????????????resolve(6);
????????},?0)
????????resolve(1);
????});
????resolve(2);
????p.then((arg)?=>?{
????????console.log(arg);
????});

}));

first().then((arg)?=>?{
????console.log(arg);
});
console.log(4);

#12

難易程度：??

var?p?=?new?Promise((resolve,?reject)?=>?{
??reject(Error('The?Fails!'))
})
p.catch(error?=>?console.log(error.message))
p.catch(error?=>?console.log(error.message))

#13

難易程度：???

var?p?=?new?Promise((resolve,?reject)?=>?{
??return?Promise.reject(Error('The?Fails!'))
})
p.catch(error?=>?console.log(error.message))
p.catch(error?=>?console.log(error.message))

#14

難易程度：??

var?p?=?new?Promise((resolve,?reject)?=>?{
????reject(Error('The?Fails!'))
??})
??.catch(error?=>?console.log(error))
??.then(error?=>?console.log(error))

#15

難易程度：??

new?Promise((resolve,?reject)?=>?{
????resolve('Success!')
??})
??.then(()?=>?{
????throw?Error('Oh?noes!')
??})
??.catch(error?=>?{
????return?"actually,?that?worked"
??})
??.catch(error?=>?console.log(error.message))

#16

難易程度：??

Promise.resolve('Success!')
??.then(data?=>?{
????return?data.toUpperCase()
??})
??.then(data?=>?{
????console.log(data)
????return?data
??})
??.then(console.log)

#17

難易程度：??

Promise.resolve('Success!')
??.then(()?=>?{
????throw?Error('Oh?noes!')
??})
??.catch(error?=>?{
????return?'actually,?that?worked'
??})
??.then(data?=>?{
????throw?Error('The?fails!')
??})
??.catch(error?=>?console.log(error.message))

#18

難易程度：????

const?first?=?()?=>?(new?Promise((resolve,reject)=>{
????console.log(3);
????let?p?=?new?Promise((resolve,?reject)=>{
?????????console.log(7);
????????setTimeout(()=>{
???????????console.log(5);
???????????resolve(6);?
????????},0)
????????resolve(1);
????});?
????resolve(2);
????p.then((arg)=>{
????????console.log(arg);
????});

}));

first().then((arg)=>{
????console.log(arg);
});
console.log(4);

#19

難易程度：?????

async?function?async1()?{
??console.log(1);
??const?result?=?await?async2();
??console.log(3);
}

async?function?async2()?{
??console.log(2);
}

Promise.resolve().then(()?=>?{
??console.log(4);
});

setTimeout(()?=>?{
??console.log(5);
});

async1();
console.log(6);

# 最后

以上19個(gè)代碼題未貼答案，后面會(huì)單獨(dú)發(fā)送。

也歡迎大家在留言區(qū)回復(fù)參與答題。

今天一提就到這里，希望對(duì)你有所幫助。

參考資料:

https://zhuanlan.zhihu.com/p/34421918

https://zhuanlan.zhihu.com/p/30797777

https://zhuanlan.zhihu.com/p/98164787

https://juejin.cn/post/6844903986210816013#heading-3

https://juejin.cn/post/6844903605250572302