一、问题

明天忽然被共事问到一个问题，以下代码怎么输入：

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 ======  1then 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、同步代码执行完了，清空微工作队列中的工作：

  1. 取出第一个工作执行，抛出谬误，相当于将p1的状态设置为rejected，那么此时前面的catch中的回调函数也被推入微工作队列

此时微工作队列为：

[() => {  console.log('2-1')},() => {  console.log('1-2')}]
  1. 取出第二个工作执行，打印2-1

此时微工作队列为：

[() => {  console.log('1-2')}]
  1. 取出第三个工作执行，打印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

三、小结

看到这我想你曾经明确大略是怎么回事了，总之，遇到问题稳住不要慌，文档 + 源码浏览能解决百分之八十以上的问题，肯定要多思考，多了解，加油打工人~

四、参考

Promise中then和catch的执行过程

MDN：Promise.prototype.catch()

本文由博客一文多发平台 OpenWrite 公布！