站点工具

用户工具


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。

Promise A+规范

因为代码中 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"

你回答对了吗?

最后推荐一下我的 Promise精讲课程 Promise 精讲(大厂/15K以上前端求职面试必考知识点)

推荐小课的大纲

饥人谷一直致力于培养有灵魂的编程者,打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实,他们以饥人谷为起点,足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程:加微信 xiedaimala03,官网:https://jirengu.com

若愚 · 2023/02/08 18:56 · promise.then与promise.catch_链式调用与错误捕获.txt