Javascript Promise 20 题,加深理解 Promise

0x00

1
2
3
4
5
6
7
8
9
10
11
Promise.resolve(1)
.then((res) => {
console.log(res)
return 2
})
.catch((err) => {
return 3
})
.then((res) => {
console.log(res)
})
答案 >folded
1
2
1
2

0x01 执行顺序

1
2
3
4
5
6
7
8
9
const promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
console.log(2)
})
promise.then(() => {
console.log(3)
})
console.log(4)
答案 >folded
1
2
3
4
1
2
4
3

0x02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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)
答案 >folded
1
2
3
4
promise1 Promise { <state>: "pending" }
promise2 Promise { <state>: "pending" }
promise1 Promise { <state>: "fulfilled", <value>: "success" }
promise2 Promise { <state>: "rejected", <reason>: Error: "error!!!" }

0x03 宏任务与微任务

1
2
3
4
5
6
7
8
9
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)
答案 >folded
1
2
3
4
5
1
2
4
3
5

0x04

1
2
3
4
5
6
7
8
9
10
11
12
13
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)
})
答案 >folded
1
then: success1

0x05

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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)
})
答案 >folded
1
2
3
once
success 1000 注:理想情况为 1000,实际可能是 1000 多
success 1000 注:理想情况为 1000,实际可能是 1000 多

0x06

1
2
3
4
5
6
7
8
9
10
Promise.resolve()
.then(() => {
return new Error('error!!!')
})
.then((res) => {
console.log('then: ', res)
})
.catch((err) => {
console.log('catch: ', err)
})
答案 >folded
1
then: Error: error!!!

0x07

1
2
3
4
5
const promise = Promise.resolve()
.then(() => {
return promise
})
promise.catch(console.error)
答案 >folded
1
2
3
4
SpiderMonkey:
TypeError: A promise cannot be resolved with itself.
V8:
TypeError: Chaining cycle detected for promise #<Promise>

0x08

1
2
3
4
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
答案 >folded
1
1

0x09

1
2
3
4
5
6
7
8
9
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)
})
答案 >folded
1
fail2: Error: error
1
2
3
4
5
6
7
8
9
10
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)
})
答案 >folded
1
fail2: Error: error

0x0a

1
2
3
4
5
6
7
8
9
10
11
process.nextTick(() => {
console.log('nextTick')
})
Promise.resolve()
.then(() => {
console.log('then')
})
setImmediate(() => {
console.log('setImmediate')
})
console.log('end')
答案 >folded
1
2
3
4
end
nextTick
then
setImmediate

0x0b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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);
答案 >folded
1
2
3
4
5
6
3
7
4
1
2
5

0x0c

1
2
3
4
5
var p = new Promise((resolve, reject) => {
reject(Error('The Fails!'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))
答案 >folded
1
2
The Fails!
The Fails!

0x0d

1
2
3
4
5
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))
答案 >folded
1
Uncaught (in promise) Error: The Fails!

0x0e

1
2
3
4
5
var p = new Promise((resolve, reject) => {
reject(Error('The Fails!'))
})
.catch(error => console.log(error))
.then(error => console.log(error))
答案 >folded
1
2
Error: The Fails!
undefined

0x0f

1
2
3
4
5
6
7
new Promise((resolve, reject) => {
resolve('Success!')
}).then(() => {
throw Error('Oh noes!')
}).catch(error => {
return "actually, that worked"
}).catch(error => console.log(error.message))
答案 >folded
1
[No output]

0x10

1
2
3
4
5
6
7
8
9
Promise.resolve('Success!')
.then(data => {
return data.toUpperCase()
})
.then(data => {
console.log(data)
return data
})
.then(console.log)
答案 >folded
1
2
SUCCESS!
SUCCESS!

0x11

1
2
3
4
5
6
7
8
9
10
11
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))
答案 >folded
1
The fails!

0x12

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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);
答案 >folded
1
2
3
4
5
6
3
7
4
1
2
5

0x13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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);
答案 >folded
1
2
3
4
5
6
1
2
6
4
3
5

参考资料:
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

评论

微信二维码