Angular12/rxjs/typescript嵌套订阅Observable不完成问题及优化咨询

• 时序问题：跳过上传分支中，你先执行subject.next('')再返回Observable，普通Subject不会缓存历史事件，后续订阅时已经错过该事件，因此收不到空字符串，自然不会触发跳转。
• 嵌套订阅冗余：多层subscribe嵌套不符合RxJS响应式编程规范，无法统一管理异常、完成事件，也容易出现不可预期的时序问题。
• 缺少异常兜底：现有代码没有处理任意步骤的报错场景，一旦某一步出错会直接中断流程，无法满足「无论成功/失败/跳过都要跳转」的需求。

直接用RxJS内置操作符替换手动维护的Subject和嵌套订阅即可，修改后完整代码如下：

foo(): void {
  this.httpHandler.updateUser(userData).pipe(
    // 用户更新成功后切换到头像上传流程
    switchMap(() => this.uploadAvatar()),
    // 捕获用户更新环节的错误，兜底返回空字符串保证流程不中断
    catchError(() => of(''))
  ).subscribe(url => {
    // 所有场景最终都会走到这里执行路由跳转
    this.route.navigate(url);
  })
}

// returns an url or '' if skipped/error
uploadAvatar(): Observable<string> {
  if (skipFileUpload) {
    // of会在订阅后发送值，不会出现时序问题
    return of('');
  }

  return this.httpHandler.uploadImage(this.file).pipe(
    // 上传成功后切换到校验逻辑
    switchMap(successData => this.httpHandler.verifySomething(successData.id)),
    // 校验通过返回url，否则返回空
    map(verifiedData => verifiedData ? verifiedData.url : ''),
    // 捕获上传、校验环节的错误，兜底返回空字符串
    catchError(() => of(''))
  );
}

• 完全移除了手动创建的Subject，从根源上避免了手动控制事件发送的时序问题。
• 所有异步流程用switchMap做扁平化处理，没有嵌套订阅，逻辑更清晰易维护。
• 全链路添加异常兜底，任意环节报错、跳过、执行成功都会正常返回字符串，最终触发跳转，完全匹配预期的执行逻辑。

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