分别有下面两个写法,区别就是后者用的 .catch
,为啥同用调用后打印结果不一样呢,前者打印 1
,后者打印 2
function myPromiseRace(arr) {
return new Promise((resolve, reject) => {
for (let item of arr) {
item.then(
res => { resolve(res) },
err => { reject(err) }
)
}
})
}
function myPromiseRace(arr) {
return new Promise((resolve, reject) => {
for (let item of arr) {
item
.then(
res => { resolve(res) }
)
.catch(err => {
reject(err)
})
}
})
}
调用
let p1 = Promise.reject(1),
p2 = Promise.resolve(2),
p3 = Promise.resolve(3)
myPromiseRace([p1, p2, p3]).then(res => {
console.log(res)
}).catch(err => {
console.log(err);
})
1
h503mc 2021-01-30 15:34:59 +08:00 1
第二种写法需要 then 里的函数 reject 掉才会触发下一个的 catch
|
2
genal 2021-01-30 16:11:50 +08:00 1
第二个 mypromise 多了个 catch,相当于多套了一层,所以第一个 promise 更慢,由于 promise 只能 resolve,reject 一次,谁快先输出谁
|
3
genal 2021-01-30 16:12:32 +08:00
后面的 resolve,rejecrt 是什么不重要了,promise 只能 resolve,reject 一次
|
4
faceRollingKB 2021-01-30 16:13:27 +08:00 5
从 micro task 的角度看,promise 本体在 current task 中执行,then 里面的回调被添加到 micro task 队列中,而第二种写法里面的 catch 是在 then 所属的 micro task 被执行时才被添加到 micro task 队列的,所以:
第一种写法:三个 promise 依次被添加 then 里面定义的 micro task,得到队列 p1-then 、p2-then 、p3-then,p1-then 的 reject 回调会赢得 race ; 第二种写法:三个 promise 依次被添加 then 里面定义的 micro task,micro task 的执行结果会得到新的 promise,继而依次添加 catch 里面的 micro task,完全执行下去会有 6 个 micro task,依次是 p1-then 、p2-then 、p3-then 、p1-catch 、p2-catch 、p3-catch,p1 的 then 虽然排在第 1 位,但只是返回了一个新的 promise 并将 p1-catch 添加到 micro task 队列,并没有回调 then 的第一个参数,所以 p2-then 赢得 race 。 |
6
rodrick OP @faceRollingKB 啊我明白了!确实是在微任务队列里是有先后执行顺序的,我给这茬忘了,非常感谢
|
7
TommyDx 2021-01-30 16:24:40 +08:00
第二种写法,在 p1 的 reject 还没被 catch 的时候,p2 的 resolve 已经被 new Promise 的 resolve 函数输出了
|
8
cxe2v 2021-01-30 17:29:39 +08:00 1
4 楼说的很详细了,我说下简化版本的
第一种写法,是同时将 resolve 和 reject 添加到了 微任务 队列 第二种写法,只是将 resolve 先添加到了微任务队列,然后再依次添加了 catch 到微任务 那么第二种写法在执行的时候,肯定是谁先 resolve 谁就赢了,因为 reject 的那个 catch 微任务是排在所有 resolve 的后面的 |
9
Sparetire 2021-01-30 17:30:11 +08:00 via Android
第一种写法一个 tick,第二种写法两个 tick
|