萌新！关于promise链式调用的错误捕捉（见描述）？求大佬指点！

Question

目前有这样的需求，页面上有两个按钮---保存和提交，点击保存的时候，会调用保存接口，点击提交的时候回先调用保存接口然后调用提交接口。然后我就写成如下：//点击保存按钮的时候save(){//请求保存接口axios.get(...).then(){//消息提示}.catch(error){处理错误信息}}//请求提交接口commit(){axios.get(...).then(){//....}.catch(error){//错误处理}}confirm(){//先请求保存接口axios.get(...).then(){//调用提交接口this.commit()}.catch(error){处理错误信息}}一开始我是这么写的，因为也就2个接口链式，但是后来我仔细一想这样写的话，不就是回调地狱的写法了吗，在then的回调函数里调用函数。所以我改写成//点击保存按钮的时候save(){//请求保存接口axios.get(...).then(){//消息提示}.catch(error){处理错误信息}}//请求提交接口commit(){returnaxios.get(...)}confirm(){//先请求保存接口axios.get(...).then(){//调用提交接口returnthis.commit()}.then(){}.catch(error){//错误处理}}但是这样我想到一个问题，他后面这个catch捕获的是保存接口的报错还是提交接口的报错呢？总所周知then和catch都会返回promise，如果就是就近的使用catch捕捉，那么后面的then方法会运行造成不可预料的错误

Answer 1

//看你想怎么捕捉了//一个promise异常会被就近的catch捕捉
save(){
//请求保存接口
returnaxios.get(...).catch(error){
//单独处理
}
}
//请求提交接口
commit(){
returnaxios.get(...).catch(...)
}
confirm(){
this.save().then(){
returnthis.commit()
}.then(){}.catch(error){
//这里是不会来的因为上面都捕捉完了
}
}
//验证
functionaxios(){
returnnewPromise((resolve,reject)=>{
setTimeout(resolve,3000)
//setTimeout(reject,3000)
})
}
functioncommit(){
returnaxios().catch(()=>{
console.log(1)
})
}
functionsave(){
returnaxios().catch(()=>{
console.log(2)
})
}
functionconfirm(){
commit().then(()=>{
//这里判断是否时序需要执行save
console.log(3);
returnsave()
}).then(()=>{
console.log(4);
}).catch(()=>{
console.log(5);
})
}
confirm()
//setTimeout(resolve,3000)
打印34
//setTimeout(reject,3000)
打印1321
                            

Answer 2

换一个写法
axios.get(...)
.then(this.save)//save和commit但凡有一个方法中catch了，那么这个链路下面的catch都不会捕捉到所以catch要控制好，不然什么地方断的你都不知道
.then(this.commit)
.catch(e=>{})