如何避免回调地狱？then链中catch未触发问题排查

嘿，这个坑我当初刚用Promise的时候也踩过！你之所以遇到sePermiteModificarElCupon拒绝时catch没触发的问题，核心原因是你直接执行了sePermiteModificarElCupon(25)，而不是把它作为回调函数传递给then。

先说说你错误写法的问题 #

当你写：

estaElServicioDespachado(15).then(sePermiteModificarElCupon(25)).then(...)

JavaScript会立即执行sePermiteModificarElCupon(25)，把它的返回值（一个Promise）传给then——但这个Promise和estaElServicioDespachado(15)的Promise链完全是分离的！所以它的错误不会被后续的catch捕获，而且还会导致第一个Promise完成前就提前调用了第二个异步操作，完全违背了你链式调用的初衷。

正确的链式写法（避免回调地狱+错误正确捕获） #

我们需要用一个回调函数（箭头函数或普通函数）包裹sePermiteModificarElCupon(25)，让它在第一个Promise resolved之后再执行，同时把它返回的Promise链接到整个链里：

estaElServicioDespachado(15)
  // 用箭头函数包裹，等第一个Promise完成后再调用第二个异步函数
  .then(() => sePermiteModificarElCupon(25))
  // 第二个Promise resolved后的处理
  .then(respuesta => {
    $state.go("barra.general.formularioCupon");
  })
  // 统一捕获整个链中任意位置的错误
  .catch(error => {
    alert(error);
  });

为什么这个写法能解决问题？ #

1. 箭头函数延迟执行：() => sePermiteModificarElCupon(25)是一个函数，只有当第一个Promise完成时，then才会调用这个函数，进而执行sePermiteModificarElCupon(25)。
2. Promise链的正确链接：sePermiteModificarElCupon(25)返回的Promise会被自动加入到整个链式调用中，它的resolve/reject状态会被后续的then/catch处理。
3. 统一错误处理：用一个catch就能捕获链中所有Promise的错误，不管是estaElServicioDespachado(15)失败，还是sePermiteModificarElCupon(25)失败，都会走到这个catch里，比原来每个then都写错误回调简洁多了。

如果你习惯用普通函数而不是箭头函数，也可以这么写：

estaElServicioDespachado(15)
  .then(function() {
    return sePermiteModificarElCupon(25);
  })
  .then(function(respuesta) {
    $state.go("barra.general.formularioCupon");
  })
  .catch(function(error) {
    alert(error);
  });

效果是完全一样的，只是箭头函数更简洁。

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