promise.then与promise.catch 链式调用与错误捕获
开讲之前，先做一道题目。如果同时包含多个.then和.catch，且.then包含第二个用与错误处理的函数，运行结果什么？
// code 1
new Promise((resolve, reject) => {
reject('error')
}).then(()=> {
console.log('ok 1')
}, (err) => {
console.log('error 1: ' + err)
}).then(() => {
console.log('ok 2')
}, (err) => {
console.log('error 2: ' + err)
}).catch(err => {
console.log('catch 1: ' + err)
})给出以下4个备选答案，你会选什么？
答案 A
error 1: error
error 2: error
catch 1: error
答案 B
error 1: error
答案 C
error 1: error
ok 2
答案 D
error 1: error
ok 2
catch 1: error往下滚动揭晓答案
正确答案是 C。
分析
code1 等价于以下写法
// code 2
let p1 = new Promise((resolve, reject) => {
reject('error')
})
let p2 = p1.then(()=> { //line 4
console.log('ok 1')
}, function fn2(err) {
console.log('error 1: ' + err)
})
let p3 = p2.then(() => { //line 9
console.log('ok 2')
}, function fn3(err) {
console.log('error 2: ' + err)
})
let p4 = p3.catch(function fn4(err) { //line 14
console.log('catch 1: ' + err)
})
console.log(p1, p2, p3, p4)首先执行同步的代码，创建已经 rejected 的p1 和处于 pending的 p2、p3、p4。
p1的reject 触发 p1.then的第二个参数，也就是fn2的运行， 输出 error 1: error 。fn2运行后此时 p2变成 fulfilled 状态 （注意不是rejected，可以理解为函数的执行意味着错误的处理，错误处理了就圆满了，后面就没错误了） ，同时触发p2.then的第一个参数的运行(line 9)，输出 ok 2 。此刻p3变成fulfilled，p3.catch不会捕捉到任何错误，fn4不会运行。
如果fn2不存在呢？如code3 所示，p1.then的第二个参数没有传递
// code 3
let p1 = new Promise((resolve, reject) => {
reject('error')
})
let p2 = p1.then(()=> { //line 4
console.log('ok 1')
}) //注意这里.then没第二个函数参数
let p3 = p2.then(() => { //line 7
console.log('ok 2')
}, function fn3(err) { // line9
console.log('error 2: ' + err)
})
let p4 = p3.catch(function fn4(err) { //line 12
console.log('catch 1: ' + err)
})
console.log(p1, p2, p3, p4)以上代码的输出是
error 2: error根据 Promise A+规范 2.2.7.3， 对于 p2 = p1.then(onFulfilled, onRejected) ，如果 onRejected 不是一个函数，并且 p1 被 rejected， p2 一定被 rejected 并且使用和 p1 相同的 reason。
因为代码中 p1.then的第二个参数为空，所以 p1的reject 触发p2 变为rejected。同时触发p2.then的第二个参数fn3的运行(line 9)，输出 error2: error 。此刻p3变成fulfilled，p3.catch不会捕捉到任何错误，fn4不会运行。
假设去掉line9 里的fn3呢？
// code 4
let p1 = new Promise((resolve, reject) => {
reject('error')
})
let p2 = p1.then(()=> { //line 4
console.log('ok 1')
}) //注意这里.then没第二个函数参数
let p3 = p2.then(() => { //line 7
console.log('ok 2')
}) //注意这里.then没第二个函数参数
let p4 = p3.catch(function fn4(err) { //line 12
console.log('catch 1: ' + err)
})
console.log(p1, p2, p3, p4)以上代码输出结果是，分析过程同上。
catch 1: error我们也可以在中途 throw 错误
// code 5
let p1 = new Promise((resolve, reject) => {
reject('error')
})
let p2 = p1.then(()=> { //line 4
console.log('ok 1')
}) //注意这里.then没第二个函数参数
let p3 = p2.then(() => { //line 7
console.log('ok 2')
}, function fn3(err) { // line9
console.log('error 2: ' + err)
throw 'error 3' // line11 注意这里 throw了错误，p3会变成rejected状态，错误会交给后续处理
})
let p4 = p3.catch(function fn4(err) { //line 13
console.log('catch 1: ' + err)
})
console.log(p1, p2, p3, p4)如code5 的 line 11所示， 如果没加 throw 'error 3' 这行代码，p3内处理了错误，p3变成fulfilled 状态，不会触发 p3.catch里的 fn4 的执行 （line 13）。 如果 加了 throw 'error 3' ，则又抛出一个错误，p3变为rejected 状态，会触发 p3.catch里的 fn4 的执行。
code5 代码输出为
error2: error
catch1: error3总结
错误在传递的过程中如果被中途“处理”（触发then的第二个函数参数，或者被catch），则不再传递。否则继续传递，直到被处理。错误被"处理"之后，过程中的Promise对象全部都是完成状态的。
试一试如下代码
//code 6
new Promise((resolve, reject) => {
reject('error') //2
}).then(()=> {
console.log('ok 1') //4
}, (err) => {
console.log('error 1:' + err) //6
}).then(() => {
console.log('ok 2') //8
}, (err) => {
console.log('error 2:' + err) //10
}).then(() => {
console.log('ok 3') //12
}, (err) => {
console.log('error 3:' + err) //14
}).catch(err => {
console.log('catch 1:' + err) //16
}).finally(() => {
console.log('finally 1') //18
}).then(() => {
console.log('ok 4') //19
}, (err) => {
console.log('error 4:' + err) //20
}).finally(() => {
console.log('finally 2') //22
}).catch(err => {
console.log('catch 2:' + err) //24
})以上代码运行结果是
"error 1:error"
"ok 2"
"ok 3"
"finally 1"
"ok 4"
"finally 2"你回答对了吗？
原文 https://zhuanlan.zhihu.com/p/522113410
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！