如何将Angular数据服务中的HttpClient异常传递给观察者？

你的问题核心在于BehaviorSubject的错误传递方式不对：你用caseSource.next(error)把错误当作普通数据发送了，这只会触发订阅的next回调，而永远不会走到error回调里。而且更关键的是，BehaviorSubject一旦调用error()方法触发错误流，整个Subject就会被终止，后续无法再发送任何数据——这对于长期共享数据的服务来说非常不友好。

下面给你两种可行的解决方案，首推第一种状态对象的方式：

方案一：用状态对象统一管理数据、加载、错误状态（推荐） #

这种方式不会终止数据流，还能同时维护加载状态、数据和错误信息，是Angular中处理这类场景的最佳实践之一。

第一步：定义状态接口 #

首先在DataService里定义一个包含所有状态的接口：

interface CaseState {
  data: ICase | null;
  error: string | null;
  loading: boolean;
}

第二步：改造DataService #

把原来的BehaviorSubject<ICase>换成BehaviorSubject<CaseState>，统一通过状态对象传递所有信息：

export class DataService {
  private interface CaseState {
    data: ICase | null;
    error: string | null;
    loading: boolean;
  }

  // 初始状态：无数据、无错误、加载中
  private caseStateSource = new BehaviorSubject<CaseState>({
    data: null,
    error: null,
    loading: true
  });
  // 对外暴露状态流
  currentCaseState = this.caseStateSource.asObservable();

  constructor(private ccWebService: CCWebService) {
    // 初始化时检查本地存储的id
    const currentId = localStorage.getItem('currentId');
    if (currentId) {
      this.loadCase(parseInt(currentId));
    } else {
      // 没有id，更新状态为加载完成
      this.caseStateSource.next({
        data: null,
        error: null,
        loading: false
      });
    }
  }

  loadCase(Id: number) {
    localStorage.setItem('currentId', Id.toString());
    // 开始加载：重置错误，设置加载状态
    this.caseStateSource.next({
      ...this.caseStateSource.value,
      loading: true,
      error: null
    });

    this.ccWebService.getCase(Id).subscribe(
      data => {
        // 加载成功：更新数据，结束加载
        this.caseStateSource.next({
          data,
          error: null,
          loading: false
        });
      },
      error => {
        // 加载失败：保存错误信息，结束加载
        this.caseStateSource.next({
          data: null,
          error: error.message || '案例加载失败',
          loading: false
        });
      });
  }
}

第三步：改造组件订阅逻辑 #

现在组件只需要订阅状态流，就能同时获取数据、错误和加载状态：

export class ViewComponent implements OnInit {
  caseState$: Observable<CaseState>;
  loading: boolean = true;
  error: string = '';
  currentCase: ICase | null = null;

  constructor(private dataService: DataService, private router: Router) { }

  ngOnInit() {
    this.caseState$ = this.dataService.currentCaseState;
    this.caseState$.subscribe(state => {
      this.loading = state.loading;
      this.error = state.error;
      this.currentCase = state.data;
    });
  }
}

方案二：单独使用Error Subject（不推荐） #

如果你坚持要分开数据和错误流，可以在DataService里新增一个专门处理错误的Subject，但这样组件需要订阅两个流，代码会更繁琐，而且一旦错误流触发，不会终止数据流：

export class DataService {
  private caseSource = new BehaviorSubject<ICase>(null);
  private errorSource = new Subject<string>();

  currentCase = this.caseSource.asObservable();
  caseError = this.errorSource.asObservable();

  // ... 其他构造函数代码不变

  loadCase(Id: number) {
    localStorage.setItem('currentId', Id.toString());
    this.ccWebService.getCase(Id).subscribe(
      data => {
        this.caseSource.next(data);
      },
      error => {
        // 发送错误到错误流
        this.errorSource.next(error.message || '加载失败');
        // 可以选择清空当前数据
        this.caseSource.next(null);
      });
  }
}

组件里需要同时订阅两个流：

ngOnInit() {
  this.dataService.currentCase.subscribe(data => {
    this.loading = data == null;
    this.currentCase = data;
  });
  
  this.dataService.caseError.subscribe(error => {
    this.error = error;
    this.loading = false;
  });
}

为什么原来的方式不行？ #

要记住：

• Subject/BehaviorSubject的next()方法只会触发订阅的next回调
• 只有调用error()方法才会触发error回调，但一旦调用error()，这个Subject就会被永久终止，无法再发送任何数据
• 你的错误拦截器已经会弹出错误提示，但如果想让组件也拿到错误信息，用状态对象的方式是最灵活且安全的。

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