如何中断Promise链（处理错误并停止后续.then执行）？

嘿，我来帮你搞定这个Promise链中断的问题！

要实现错误触发时中断后续.then执行，核心问题出在你当前的写法上：你在第一个.then里用了第二个错误回调参数，这会让Promise在错误被处理后转为resolved状态，导致后面的.then还是会跑起来。咱们换个思路来改：

核心思路 #

• 不要在中间的.then里处理错误：把错误处理统一放到链末尾的.catch()中，这样错误会沿着链冒泡，跳过中间所有的成功回调.then。
• 用.finally()处理清理操作：比如关闭加载框，不管成功失败都得执行，避免加载状态一直挂着。

修改后的代码 #

onSubmit(f: any) { 
  let loading = this.loadingCtrl.create({ content: 'Sending a form...' }); 
  loading.present(); 

  this.submitProvider.sendByPost(f) 
  .then( (res) => { 
    this.formSent = true;
    console.log('Form is sent');
  }) 
  .then( () => { 
    this.pushPage(); 
    this.removeChosenPicture(); 
    // 其他你要在成功后执行的操作
  })
  .catch( (err) => { 
    console.log('Encountered an error...', err); 
    // 这里写你的错误处理逻辑，比如给用户弹提示啥的
  })
  .finally( () => {
    loading.dismiss(); // 不管成功失败，加载框都得关
  });
}

为啥这样能行？ #

• 当sendByPost(f)失败时，第一个.then的成功回调会被跳过，错误直接传到.catch里处理，中间的第二个.then完全不会执行，完美中断了链。
• .finally是ES6 Promise的标准方法，不管Promise最终是成功还是失败，它都会执行，刚好适合处理加载框这种必须清理的操作。

如果你觉得成功后的操作放在两个.then里麻烦，也可以合并成一个，效果完全一样：

onSubmit(f: any) { 
  let loading = this.loadingCtrl.create({ content: 'Sending a form...' }); 
  loading.present(); 

  this.submitProvider.sendByPost(f) 
  .then( (res) => { 
    this.formSent = true;
    console.log('Form is sent');
    this.pushPage(); 
    this.removeChosenPicture(); 
    // 所有成功操作放这儿
  })
  .catch( (err) => { 
    console.log('Encountered an error...', err); 
    // 错误处理
  })
  .finally( () => {
    loading.dismiss();
  });
}

这样改完，错误时后续的成功操作就完全不会执行啦～

内容的提问来源于stack exchange，提问作者viiskis