AngularJS 1.x中如何高效扁平化带catch的Promise链？

嘿，我完全懂你现在的头疼点——想把嵌套的Promise catch改成扁平化的链，结果发现后面的then会在前序操作成功时也跟着执行，完全打乱了“只有失败才走备选”的逻辑，还差点掉进嵌套地狱对吧？别慌，我们用AngularJS $q的特性就能写出简洁又符合需求的代码，彻底摆脱嵌套。

先理清问题根源 #

你之前尝试的扁平化写法之所以出问题，是因为Promise链的then会在前序Promise resolved时执行，不管这个resolved是来自主流程还是备选操作。而我们需要的是：主流程成功就终止，主流程失败才尝试fallback1；fallback1失败再尝试fallback2，以此类推。

第一步：抛弃Defer反模式 #

先改掉你原代码里手动创建$q.defer()的习惯——这是Promise里的常见反模式，AngularJS的Promise链本身就可以通过返回值或新Promise传递状态，手动defer只会让代码变复杂、容易出错。

比如原代码里的这段：

var d = $q.defer();
// ...
.then(function () {console.log ("All good"); d.resolve(true); return d.promise;})

可以直接简化成：

.then(function() {
  console.log("All good");
  return true; // $q会自动包装为resolved的Promise
})

第二步：扁平化的备选操作链 #

核心思路是：用catch串联备选操作——只有当前序Promise被rejected时，才会进入对应的catch，在catch里返回下一个备选操作的Promise，这样整个链是线性的，没有嵌套。

我们可以把每个独立操作（主流程、每个fallback）封装成单独的函数，让逻辑更清晰：

// 封装主流程：返回resolved Promise表示成功，rejected表示失败
function tryMainFlow() {
  return do1()
    .then(do2) // 直接传函数，比匿名函数更简洁
    .then(do3)
    .then(function() {
      console.log("All good");
      return true;
    });
}

// 封装fallback1
function tryFallback1() {
  return fallback1()
    .then(function() {
      console.log("Ah this fallback1 worked");
      return true;
    });
}

// 封装fallback2
function tryFallback2() {
  return fallback2()
    .then(function() {
      console.log("fallback2 worked");
      return true;
    });
}

// 最终的扁平化链式调用
function doMyFunction() {
  return tryMainFlow()
    // 主流程失败，尝试fallback1
    .catch(function() {
      console.log("Oh no, main flow failed");
      return tryFallback1();
    })
    // fallback1失败，尝试fallback2
    .catch(function() {
      console.log("Oh no, fallback1 failed");
      return tryFallback2();
    })
    // 所有操作都失败的最终处理
    .catch(function() {
      console.log("All fallbacks failed");
      return false; // 或者返回$q.reject(false)，根据你的业务需求选择
    });
}

为什么这个写法有效？ #

• 主流程成功时，tryMainFlow()返回resolved Promise，会直接跳过后面所有的catch，最终返回true。
• 主流程失败时，进入第一个catch，执行tryFallback1()；如果tryFallback1()成功，返回resolved Promise，跳过后续catch；如果失败，进入第二个catch执行tryFallback2()。
• 所有操作都失败时，最后一个catch会捕获并处理，返回false。

整个链完全是扁平化的，没有嵌套，逻辑清晰，也不会出现“前序成功却执行备选then”的问题。

额外小贴士：批量处理多个备选 #

如果你的备选操作很多，可以把它们放进数组，用Array.prototype.reduce()来动态生成链式调用，代码会更简洁：

function doMyFunction() {
  // 按顺序排列要尝试的操作
  const attempts = [tryMainFlow, tryFallback1, tryFallback2];
  
  // 用reduce串联所有操作
  return attempts.reduce(function(prevPromise, currentAttempt) {
    return prevPromise.catch(function() {
      return currentAttempt();
    });
  }, $q.reject()) // 初始值设为rejected，触发第一个尝试
  .catch(function() {
    console.log("All attempts failed");
    return false;
  });
}

这个写法的好处是，新增备选操作只需要在attempts数组里加函数就行，不用修改链式调用的代码，扩展性极强。

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