一、问题
今天突然被同事问到一个问题，以下代码怎么输出：
Promise.all([
new Promise(res => res(0)),
new Promise((res, rej) => rej(1))
]).then(v => {
console.log('then 1 ====== ', v)
}).catch(e => {
console.log('catch 1 ====== ', e)
})
Promise.all([
new Promise(res => res(0)),
new Promise(res => res(1)),
new Promise(res => res(2)),
new Promise(res => res(3))
]).then(v => {
console.log('then 2 ====== ', v)
}).catch(e => {
console.log('catch 2 ====== ', e)
})
一眼看完，我果断回答了如下答案：
catch 1 ====== 1
then 2 ====== [0, 1, 2, 3]
然而...翻了个大车，实际代码运行结果是：
then 2 ====== [0, 1, 2, 3]
catch 1 ====== 1
一直以来都有个误解，以为then和catch的执行是一个二选一的过程，但这段代码颠覆了我的认知，这是为什么？它的执行过程是怎样的？Promise.all()方法的特点是输入的所有promise都完成则完成，有一个拒绝则拒绝，所以显然不是Promise.all()的问题。
那么其实可以将上面的例子简化成如下代码，后面的分析将以如下代码为例
Promise.reject().then(() => {
console.log('1-1')
}).catch(() => {
console.log('1-2')
})
Promise.resolve().then(() => {
console.log('2-1')
}).catch(() => {
console.log('2-2')
})
这段代码的执行结果是：2-1、1-2
二、执行过程拆解
翻了一下MDN：catch
也就是说，catch是then的语法糖，obj.catch(fn) 内部其实是调用obj.then(undefined, fn)。
根据Promise/A+规范，Promise.prototype.then(arg1, arg2)两个参数都是可选，分为以下两种情况：
- 如果promise状态是fullfilled，而arg1是undefined，那么arg1就相当于 x => x
- 如果promise的状态是rejected，而arg2是undefined，那么arg2是一个throw error
Promise/A+规范：https://promisesaplus.com/
结合上面的解释，代码的执行过程为：
1、执行同步代码，解析Promise.reject().then(fn)，满足情况二，相当于：
Promise.reject().then(() => {
console.log('1-1')
}, () => {
throw Error();
}).catch(() => {
console.log('1-2')
})
我们知道then方法的返回值也是一个promise，此时假设调用Promise.reject().then(arg1, arg2)返回的promise为p1。
注意此时推入微任务队列的是arg2，也就是抛出错误的回调（Promise状态改变后，then中的回调才会被推入微任务队列）。之后p1又调用了catch，因为此时p1状态还没有被解决（p1处于pending状态），后面的catch设置的回调不会执行，而p1的状态要等到处理微任务队列时才会被解决。
假设微任务队列为一个数组，那么此时微任务队列中应该为：
[() => {
throw Error()
}]
2、继续执行同步代码，解析Promise.resolve().then(fn)，Promise状态为fulfilled，then中的回调fn被正常推入微任务队列。
Promise.resolve().then(() => {
console.log('2-1')
}).catch(() => {
console.log('2-2')
})
此时微任务队列中应该为：
[() => {
throw Error()
},() => {
console.log('2-1')
}]
3、同步代码执行完了，清空微任务队列中的任务：
- 取出第一个任务执行，抛出错误，相当于将p1的状态设置为rejected，那么此时后面的catch中的回调函数也被推入微任务队列
此时微任务队列为：
[() => {
console.log('2-1')
},() => {
console.log('1-2')
}]
- 取出第二个任务执行，打印2-1
此时微任务队列为：
[() => {
console.log('1-2')
}]
- 取出第三个任务执行，打印1-2
此时微任务队列为：微任务队列清空。
[]
这个问题的关键就在于catch内部调用的还是obj.then(undefined, arg2)，如果前一个promise的状态是rejected，并且then中第二个参数arg2是undefined，那么arg2是一个throw error，因此状态会顺延到Event Loop下一次Tick。
再看下面的例子：
Promise.reject().then(() => {
console.log('1-1')
}).catch(() => {
console.log('1-2')
throw Error()
}).then(() => {
console.log('1-3')
}).catch(() => {
console.log('1-4')
})
Promise.resolve().then(() => {
console.log('2-1')
}).catch(() => {
console.log('2-2')
})
调用catch方法在没有设置返回值的情况下默认也会返回一个状态为fulfilled的promise，正常情况下会走后面设置的then回调，但由于这里我们在catch中抛出了新的错误，所以又回到了前面出现的问题——后面的then中的arg2为throw error，因此状态再次发生顺延。
输出顺序为：2-1、1-2、1-4
当然，如果要按开头翻车的答案顺序执行，在确定前面的Promise状态为rejected时，不接then，直接调用catch即可。
Promise.reject().catch(() => {
console.log('1-2')
})
Promise.resolve().then(() => {
console.log('2-1')
}).catch(() => {
console.log('2-2')
})
输出顺序为：1-2、2-1
三、小结
看到这我想你已经明白大概是怎么回事了，总之，遇到问题稳住不要慌，文档 + 源码阅读能解决百分之八十以上的问题，一定要多思考，多理解，加油打工人~
四、参考
本文由博客一文多发平台 OpenWrite 发布！
