Promise—关于catch（你真的了解catch的执行顺序吗

一、问题

今天突然被同事问到一个问题，以下代码怎么输出：

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

image.png

也就是说，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')
}]

2. 取出第二个任务执行，打印2-1

此时微任务队列为：

[() => {
  console.log('1-2')
}]

3. 取出第三个任务执行，打印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 发布！