今儿个朋友在重构代码的时候,和我吐槽了如下题这么个代码。让判断下调用顺序,真是Promise写出了callback的感觉。
先不看答案,试试能不能解答正确。
这道题可以说99%手写的promise都不能正确输出。
答案由Google Chrome 控制台输出(目前使用的是 125.0.6422.176 正式版本,arm64架构)。
如题
// file1
function handleSomethingUsePromise() {
return new Promise((resolve, reject) => {
Promise.resolve('api res') // same as http request
.then((res) => {
console.info('then1', res);
resolve(true)
})
.finally(() => {
console.info('request api promise finally');
})
});
}
// file2 import file1
handleSomethingUsePromise()
.then((res) => {
console.info('handleSomethingUsePromise then1, res :', res);
return 'xxx'
})
.then((res) => {
console.info('handleSomethingUsePromise then2, res :', res);
})
再上点儿难度
// file1
function handleSomethingUsePromise() {
return new Promise((resolve, reject) => {
Promise.resolve('api res') // same as http request
.then((res) => {
console.info('then1', res);
resolve(true);
console.info('last console');
resolve(false);
})
.finally(() => {
console.info(`request api promise finally`);
return '我是finally';
})
.then((res) => {
console.info(`finally之后输出什么?${res}`)
})
});
}
// file2 import file1
var p = handleSomethingUsePromise()
.then((res) => {
console.info('handleSomethingUsePromise then1, res :', res);
return 'xxx'
})
.then((res) => {
console.info('handleSomethingUsePromise then2, res :', res);
})
.finally((res) => {
console.info('新增的finally')
})
p.then((res) => {
console.info('ppp');
})
另外一题
把上面的题目给另外一个小伙伴,给出的另外一题。
setTimeout(() => {
console.log(6)
}, 0)
new Promise((res, rej) => {
console.log(1)
for(var i = 0;i< 100; i++){
i == 4 && res(i)
}
console.log(2)
})
.then(console.log(3))
.then(res => {
console.log(res)
})
console.log(5)
【如题】的答案
then1 api res
handleSomethingUsePromise then1, res : true
request api promise finally
handleSomethingUsePromise then2, res : xxx
【再上点儿难度】的答案
then1 api res
last console
handleSomethingUsePromise then1, res : true
request api promise finally
handleSomethingUsePromise then2, res : xxx
新增的finally
finally之后输出什么?undefined
ppp
【另外一题的答案】
1
2
3
5
4
undefined
6