js代码执行分析-Promise
主要考察点
- 执行顺序
- 值透传
- 错误处理
- 返回值
- 链式调用
难易程度：⭐
const promise = new Promise((resolve, reject) => {
console.log(1); // 常任务1
resolve(); // 微任务1
console.log(2); // 常任务2
});
promise.then(() => {
console.log(3); // 微任务1_常任务1
});
console.log(4); // 常任务3
执行结果：
1
2
4
3
难易程度：⭐⭐
1
setTimeout(() => {
console.log(5); // 宏任务1_常任务1
}, 0);
new Promise(resolve => {
console.log(1); // 常任务1
resolve(3); // 微任务1，作为结果返回
Promise.resolve().then(()=> {
console.log(4); // 微任务2_常任务1
});
}).then(num => {
console.log(num); // 微任务1_常任务1
});
console.log(2); // 常任务2
执行结果：
1
2
4
3
5
2
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('once'); // 多次调用只会执行一次
resolve(Date.now());
}, 1000);
});
const start = Date.now();
promise.then((res) => {
console.log(res, Date.now() - start);
});
promise.then((res) => {
console.log(res, Date.now() - start);
});
promise.then((res) => {
console.log(res, Date.now() - start);
});
执行结果：
once
success 1008
success 1008
success 1008
3
var p = new Promise((resolve, reject) => {
reject(Error('The Fails!'));
});
p.catch(error => console.log(error.message));
p.catch(error => console.log(error.message));
var p1 = new Promise((resolve, reject) => {
reject(Error('The Fails!'));
}).catch(error => console.log(error))
.then(error => console.log(error));
执行结果：
The Fails!
The Fails!
Error: The Fails!
at <anonymous>:10:12
at new Promise (<anonymous>)
at <anonymous>:9:10
5
var p = new Promise((resolve, reject) => {
resolve('Success!');
}).then(() => {
throw Error('Oh noes!');
}).catch(error => {
return "actually, that worked"
}).catch(error => console.log(error.message));
console.log(p);
执行结果：
Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "actually, that worked"
6
Promise.resolve('Success!').then(data => {
return data.toUpperCase();
}).then(data => {
console.log(data);
return data
}).then(console.log);
执行结果：
Success!
Success!
7
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));
执行结果：
The fails!
难易程度：⭐⭐⭐
1
Promise.resolve(1).then((res) => {
console.log('a', res);
return 2;
}).catch((err) => {
return 3;
}).then((res) => {
console.log('b', res);
});
执行结果：
a 1
b 2
2
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);
执行结果：
promise1 Promise{<pending>}
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
promise2 Promise{<pending>}
[[PromiseState]]: "rejected"
[[PromiseResult]]: Error: error at <anonymous>:8:9
等待3秒
promise1 Promise{<pending>}
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
promise2 Promise{<pending>}
[[PromiseState]]: "rejected"
[[PromiseResult]]: Error: error at <anonymous>:8:9
3
Promise.resolve().then(() => {
return new Error('error');
}).then((res) => {
console.log('then: ', res);
}).catch((err) => {
console.log('catch: ', err);
});
执行结果：
then: Error: error
4
Promise.resolve(1).then(2).then(Promise.resolve(3)).then(console.log);
执行结果：
1
5
Promise.resolve().then(function success (res) {
throw new Error('error');
}, function fail1 (e) {
console.log('fail1: ', e);
}).catch(function fail2 (e) {
console.log('fail2: ', e);
});
// 变种后
Promise.resolve().then(function success1 (res) {
throw new Error('error');
}, function fail1 (e) {
console.log('fail1: ', e);
}).then(function success2 (res) {
}, function fail2 (e) {
console.log('fail2: ', e);
});
执行结果：
fail2: Error: error
fail2: Error: error
6
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));
执行结果：
报错：Error: The Fails!
难易程度：⭐⭐⭐⭐
1
const promise = Promise.resolve().then(() => {
return promise;
});
promise.catch(console.error);
执行结果：
报错：TypeError: Chaining cycle detected for promise #<Promise>
2
Promise.resolve().then(() => {
console.log('then');
});
console.log('end');
执行结果：
then
end
3
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);
执行结果：
3
7
4
1
2
5
分析：
const first = () => (new Promise((resolve, reject) => {
console.log(3); // 常任务1
let p = new Promise((resolve, reject) => {
console.log(7); // 常任务2
setTimeout(()=>{ // 宏任务1
console.log(5); // 宏任务1_常任务1
resolve(6); // 无意义迷糊行为
}, 0);
resolve(1); // 微任务1
console.log(0); // 常任务3
});
resolve(2); // 微任务2
p.then((arg)=>{
console.log(arg); // 微任务2_常任务1
});
}));
first().then((arg) => {
console.log(arg); // 微任务1_常任务1
});
console.log(4); // 常任务
代码分析：
| 任务名 | 输出 |
|---|---|
| 常任务1 | 3 |
| 常任务2 | 7 |
| 常任务3 | 4 |
| 微任务1_常任务1 | 1 |
| 微任务2_常任务1 | 2 |
| 宏任务1_常任务1 | 5 |
难易程度：⭐⭐⭐⭐⭐
4
console.log('a1');
async function async1() {
console.log(1);
const result = await async2();
console.log(3);
}
console.log('a2');
async function async2() {
console.log(2);
}
console.log('a3');
Promise.resolve().then(() => {
console.log(4);
});
console.log('a4');
setTimeout(() => {
console.log(5);
});
console.log('a5');
async1();
console.log(6);
执行结果：
a1
a2
a3
a4
a5
1
2
6
4
3
5
分析： 常任务 > async > Promise.then > await > setTimeout
