大厂经常会围绕Promise 来展开面试,我们就从面试角度反推,学好重要的知识点吧~
一、结合真题来搞懂H,P,T
概念: H是宏任务,P是promise为代表的微任务,T是setTimeout这类时间函数
什么宏?,什么微? , 什么任务??? ====> 宏任务与微任务必知
-
看屁看,这么多,就两句话:::
- 宏任务 先(同一轮中)
- script 2. setTimeout/setInterval 3. UI rendering/UI事件 4. postMessage,MessageChannel 5. setImmediate,I/O(Node.js)
- 微任务 后(同一轮中)
- Promise 2.process.nextTick(Node.js) 3. Object.observe(已废弃;Proxy 对象替代)4. MutaionObserver
- 宏任务 先(同一轮中)
理论1: H=>P=>T
理论2: H=>P=>H>P.... (T属于H)
Tips: 话不多说,看题~
1.P
Promise.resolve(1)
.then((res) => {
console.log(res)
return 2
})
.catch((err) => {
return 3
})
.then((res) => {
console.log(res)
})
题解: 1,2
解析: Promise.resolve直接给数字1,那返回res 即1,到第1个console,输出1; 紧接着return 数字2,无异常,不catch走then,返回res为上面return的输出2
2.H + P
const promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
console.log(2)
})
promise.then(() => {
console.log(3)
})
console.log(4)
题解: 1,2,4,3
解析: 定义promise中,按照上下文,走1,遇resolve,自行,把promise 的状态由pending改为了fulFilled,但这没有影响,继续走2,后执行promise,then是异步函数,丢微事件队列,走4,第一轮宏任务结束,走微任务,在积攒的事件队列中,按照先进先出,就一个then,走3。
3.H + P + T
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
}, 1000)
})
const promise2 = promise1.then(() => {
console.log(1)
// throw new Error('error!!!')
})
console.log('promise1', promise1)
console.log('promise2', promise2)
setTimeout(() => {
console.log('promise3', promise1)
console.log('promise4', promise2)
}, 2000)
题解: promise1, promise2, 1, promise3, promise4
解析: 定义promise1,没有输出,走定义promise2,执行了promise1,发现一个T宏任务,丢下一个宏事件队列,紧接着遇then 是个异步函数,丢微事件队列,这次的宏任务查询还没完,往下又一个T宏任务,丢宏事件队列,再执行微任务,输出1,再执行第二轮宏任务,先入先出,resolve('success') 改掉promise1的status,但这没有影响,再走下一个宏任务,输出promise3,和promise4。
Tips: 这道题中前2个promise1,promise2,定义未执行,打印默认状态是pending,promise3打印时,promise1已经resolve了success,是fulFilled,值为'success',promise4 也是fulFilled,只是promise2没有返回值,返回值默认是undefined
- 发现了吗,上述还有一个注释,我们放开这行报错会有什么不同??
解析: 顺序还是那个顺序,只是输出1变成抛出一个错,promise4的执行结果中的promise2是rejected,返回值不再是undefined,而是Error
4.H + P + T
new Promise(resolve => {
console.log(1);
setTimeout(() => console.log(2),0)
Promise.resolve().then(() => console.log(3))
resolve();
}).then(() => console.log(4))
console.log(5)
题解: 1, 5, 3, 4, 2
解析: 很典型,定义Promise时,输出1,遇到T宏任务,丢下一轮宏事件队列,遇promise立即resolve,修改了status,但这没有影响,then是异步函数,本轮丢微事件队列,紧接着resolve当前的promise,修改了status,但这没有影响,再遇到then是异步函数,丢本轮微事件队列,继续往下找,输出5,然后开始执行本轮的微事件队列,先入先出,输出3,4,再处理下一轮宏事件队列中,也是先入先出,执行2。
Tips: 这里的setTimeout 时间虽然是0,但不影响丢事件队列以及后续的执行顺序,这题也充分应证了我们上述的理论1 H=>P => T 由于T 函数也是宏任务,所以也符合理论2 H=>P => H=>P
5.P
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)
})
题解: then: success1
解析: 故意放一道简单点的题,帮大家树立起信心去大厂厮杀~ 这题考的是状态只能从p=>f 或p=>r, 是不可逆的,这走了resolve,后到then,就不会走catch了
6.H + P + T
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('once')
}, 1000)
resolve('success')
})
promise.then((res) => {
console.log(res + 1)
})
promise.then((res) => {
console.log(res + 2)
})
题解: success1,success2,once
解析: 定义promise,遇到T宏任务,丢宏事件队列,定义start,遇then异步函数,丢微事件队列,遇then异步函数,丢微事件队列,然后开始执行微事件队列,先入先出,输出'success1' 然后是再输出一遍,输出'success2' ,然后执行下一轮宏任务,输出once
- 那我们变一变,把promise的resolve 放进setTimeout 函数里,会怎么样??
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('once')
resolve('success')
}, 1000)
})
promise.then((res) => {
console.log(res + 1)
})
promise.then((res) => {
console.log(res + 2)
})
题解: once, success1, success2
解析: 奇怪,怎么这次和我们前面的理论不匹配了呢??,差异是resolve放到了T宏任务中,我们再仔细考虑下,定义promise,却不给resolve和reject的时候,then是不会执行的,也就是只有执行到了then异步函数才会丢到微事件队列去,所以这里反而是要等setTimeout函数执行完,才去执行这两个then,当然也是先入先出执行。再看上面的题,都是在promise定义中就resolve或者reject了~
那我们趁热打铁~
7.H + P + T
new Promise(resolve => {
console.log(1);
setTimeout(() => {resolve();console.log(2)},0)
Promise.resolve().then(() => console.log(3))
}).then(() => console.log(4))
console.log(5)
题解: 1, 5, 3, 2, 4
解析: 定义promise,输出1,遇到T宏任务,丢宏事件队列,紧接着的promise直接resolve,因此遇到并执行then是异步函数,丢进微事件队列,所定义的Promise 没有resolve或reject,因此不会执行到它的then,那就继续往下,执行输出5,后执行微事件队列,输出3,然后执行下一轮宏事件队列,遇到resolve,这时候,会调用刚开始定义的Promise的then是个异步函数,丢这轮的微事件队列,执行输出2,本轮宏任务结束,执行微事件队列,输出4。
Tips: Promise.resolve().then() 这行为什么没有把new 的Promise 给resolve掉呢,我们要理解new Promise 是通过new 构造函数Promise得到一个Promise实例,而Promise.resolve() 会生成一个thenable的对象,也就是一个新的Promise实例,因此并不是同一个~
8.P
Promise.resolve()
.then(() => {
return new Error('error1')
// throw Error('error1')
})
.then(res => {
console.log('then: ', res)
})
.catch(err => {
console.log('catch1: ', err)
throw Error('error2')
})
.catch(err => {
console.log('catch2: ', err)
})
题解: then: Error:error1
解析: 这题主要考细节,这里return 的是一个Error 对象,所以是走then,而不是catch,throw一个Error 才是走catch。
- 那假设我们把注释放开,抛个错,是什么结果呢,答案是catch1: Error1, catch2:Error2 要注意的是catch 可以捕获紧挨着上个catch 中的异常 还记得上一篇我们说到catch 只是then的语法糖,本身就是thenable的,所以可以一直catch下去。
9.P
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)
}
)
题解: fail2: Error:error
解析: 这题就更需要理解catch 是then的语法糖了,以及then的两个参数(resolve, reject) ,Promise.resolve顺利执行,走resolve函数,这里就是success1,抛了个异常,那就看下面有没有catch,一看没有,但是有个then带着两个参数,我们经常看到then只有一个参数,是把第二个reject 省略了,默认只会执行resolve函数,而catch(reject) === then(undefined, reject),因此这里执行fail2,输出fail2: Error:error。
10.H + P + T
Promise.resolve().then(() => {
console.log('then')
})
process.nextTick(() => {
console.log('nextTick')
})
setImmediate(() => {
console.log('setImmediate')
})
console.log('end')
题解: end, nextTick,then, setImmediate
解析: 这题主要考的是常见的HPT有哪些,H 普通宏任务,P是异步微任务,T 也是宏任务。其实也很好记,微任务我们能见到的就是promise 和process.nextTick, 其它都是宏任务,而script 就是我们脚本,也就是第一个宏任务。那再看这题,上来其实是第一个宏任务,脚本script自上而下执行,遇到nextTick,丢微事件队列,紧接着promise直接resolve,执行then为异步函数,丢微事件队列,然后是一个宏任务,丢下一轮宏事件队列,往下输出end,然后执行微事件队列,先入先出,但是,这里要注意process.nextTick() 优先级是高于Promise的,输出nextTick,再输出then,然后执行第二轮宏任务,输出setImmediate
Tips 很多同学拷贝代码进vue项目,vue3报了个process undefined,因为移除了, 有的还报setImmediate不兼容谷歌。vue2的话发现顺序好像并不是这样,这里必须强调是node环境下,跑一个js,所以请大家新建一个js,并在命令行node 这个js去实践~
但是既然涉及到了vue,我们来看下面这个有意思的事情
11.H + P + T 在vue环境下!!
// 大家都知道vue 中有个this.$nextTick,很少会去用process.nextTick
// !! 所以我们这里就谈this.$nextTick
this.$nextTick(() => {
console.log("nextTick1")
})
Promise.resolve().then(() => {
console.log("then1")
})
setTimeout(() => {
console.log("setTimeout")
}, 0)
this.$nextTick(() => {
console.log("nextTick2")
})
Promise.resolve().then(() => {
console.log("then2")
})
题解: nextTick1,nextTick2,then1,then2,setTimeout
解析: 首先我们要知道vue的nextTick本质上是对Promise 的封装,那本来应该就看成promise 就可以啦,按照微任务的事件队列应该从上到下哇??但关键是: vue内部的promise实例一直是同一个,也就是你写后面的nextTick 会被合并到一个promise中去执行的,先入先出,nextTick1, nextTick2,然后执行异步事件队列,then1,2,最后第二轮宏事件队列输出setTimeout
12.H + P + T
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
解析: 这个题涉及的东西很多,但是按照我们的理论2走,是很简单的,我们来理一下,首先,定义first,会执行输出3,定义了一个p 是promise 对象,定义中有输出7,遇到T函数,丢宏事件队列,紧接着resolve,那就要找到then去执行,看到下面有p的then是异步函数,承接的是数值1,丢微事件队列,继续走first 被resolve,找到first的then是异步函数,承接的数值是2,丢微事件队列,继续走,发现输出4,然后执行微事件队列,先入先出,输出1,2,再执行下一轮宏事件队列,输出5,紧接着resolve(6),有同学蒙了,输出6 一个Promise 的状态修改是不可逆的,也就是不可以resolve reject 多次,因此不会输出6。
13.P
var p = new Promise((resolve, reject) => {
return Promise.reject(Error('error'))
})
p.catch(error => console.log(error.message))
p.catch(error => console.log(error.message))
题解: Error: error
解析: 没错,前面的题目可能稍微有点复杂,这里再给你树立起信心!!这个题目主要考的是如果Promise return 的是一个Promise,那么then的结果就会是这个Promise,我们知道就算return的是个数值,给到后面的也会包装成一个thenable的promise,因此这里没有抛出异常,只是把这个promise传下去了,那catch 也没东西可catch~
14.H + P + T
var p = new Promise((resolve, reject) => {
return Promise.reject(Error('error'))
})
p.catch(error => console.log(error.message))
p.then(res => console.log(res))
题解: Error: error
解析: 没错,前面的题目可能稍微有点复杂,这里再给你树立起信心!!这题return 出去,但是既没有resolve,也没有reject,下面都不会触发,但是return的结果是个可执行的函数,抛出了一个异常Error: error
15.H + P + T + async
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)
题解: 1,2,6,4,3,5
解析: 这题主要在于async,await,async函数是generate的语法糖,在这里async1中的await async2() 我们要怎么去看待呢,首先, 定义async 1 是个function,没有自行,async2也是,到了promise,直接resolve,then异步函数丢微事件队列,遇T宏任务丢宏事件队列,往下执行async1,输出1,遇到await async2,这部分相当于Promise((resolve,reject)=>{console.log(2)}).then(res=>{console.log(3)}),因此输出2直接执行,输出3丢微事件队列,追究下result 是什么?? 由于没有return值,result 就是个undefined,注意这时候第一轮宏任务还没完,还有个输出6,然后执行微事件队列,先入先出原则,是4,3,最后执行第二轮宏任务中的输出5。
16.H + P + T + async
async function async1() {
console.log('1')
await async2()
console.log(2)
Promise.resolve().then(() => {
console.log(9)
})
}
async function async2() {
console.log('3')
}
console.log('4')
setTimeout(() => {
console.log('5')
}, 0)
async1()
new Promise(function (reslove) {
console.log('6')
reslove()
}).then(function () {
console.log('7')
})
console.log('8')
喝杯茶歇会
题解: 你在想Peach? 来试试手吧,这题和上面的很类似,不过要小心的是async2里的then函数执行的不是简单的输出,而是又一个异步函数,我们之前只是看作Promise((resolve,reject)=>{console.log(2)}).then(res=>{console.log(3)}),现在 console.log(2)
Promise.resolve().then(() => {
console.log(9)
}) 整体替换了之前的3,所以执行这个整体时,先会执行2,没错,但是紧接着遇到直接resolve的promise,then是异步函数,把输出9丢这一轮的微事件队列中去,7 和 3 是同级别的,明白了吧,而这个9 是执行3时丢微事件队列,它要比3,7都晚,但是好歹是微事件队列,因此还是在5之前。
行,答案呼之欲出,欢迎打在评论区交流下,撰文不易,多多点赞支持下哟~( ̄▽ ̄)"