Angular中Promise链式调用函数返回值异常问题解决

这个问题我之前也碰到过！核心原因是Promise链断裂：在if(data.condition1())分支里，你调用了this.function2().then(...)，但没有把这个完整的Promise链返回给外层的then回调。这就导致当进入这个分支时，外层的then回调实际上返回了undefined（因为没有显式return），而不是一个Promise，所以mainFunction的Promise会直接resolve为undefined，根本不会等待function2执行完成后再返回true。

解决方案1：显式返回内部Promise链 #

只需要在调用this.function2()前加上return，把内部的Promise链传递给外层即可：

mainFunction(): Promise<boolean> { 
  return this.function1().then( (data) => { 
    if(data.condition1()){ 
      // 关键：返回function2的Promise链，让外层Promise等待它完成
      return this.function2() 
        .then(() => { 
          return true;
        });
    } else if (data.condition2()){ 
      return true; 
    } else { 
      return false; 
    } 
  } ); 
}

原理很简单：当then回调返回一个Promise时，外层的Promise会自动等待这个内部Promise完成，并将内部Promise的resolve值（也就是这里的true）作为整个链的最终结果返回。

解决方案2：用async/await简化代码（推荐） #

嵌套的then回调很容易犯这类遗漏return的错误，改用async/await能把异步代码写成同步风格，直观又不容易出错：

async mainFunction(): Promise<boolean> { 
  // 等待function1完成，拿到返回的data
  const data = await this.function1();
  
  if(data.condition1()){ 
    // 等待function2执行完毕
    await this.function2();
    return true;
  } else if (data.condition2()){ 
    return true; 
  } else { 
    return false; 
  } 
}

这种写法彻底避免了嵌套回调，逻辑一目了然，后续维护也更轻松。

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