angular - 将数据服务中的 Angular HttpClient 异常传递回观察者

问题描述

我是 Angular 的新手，我正在尝试在我的应用程序中实现一些好的模式。我有一个“数据服务”，用于与我的组件共享服务器端数据，如下所示。

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

currentCase = this.caseSource.asObservable();

constructor(private ccWebService: CCWebService) {
this.currentCase.subscribe(data => {
  if (data == null) {
    const currentId = localStorage.getItem('currentId');

    if (currentId) {
      this.loadCase(parseInt(currentId));
    }
  }
})
  }

  private changeCase(case: ICase) {
this.caseSource.next(case)
  }

  loadCase(Id: number) {
localStorage.setItem('currentId', Id.toString());
this.ccWebService.getCase(Id).subscribe(
  data => {
    this.caseSource.next(data);
  },
  error => {
    this.caseSource.next(error);
  });
}

然后我的组件订阅 currentCase，如下所示：

export class ViewComponent implements OnInit {

  case$: Observable<ICase>;
  loading: boolean = true;
  error: string = '';

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

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

  }

我还有一个错误拦截器，如下所示：

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService){}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
        .pipe(
            catchError(err => {
                if (err.status === 401) {
                    // auto logout if 401 response returned from api
                    this.authenticationService.logout();
                    location.reload(true);
                }

                let errorMessage = '';
                if (err.error instanceof ErrorEvent) {
                  // client-side error
                  errorMessage = `Client Error: ${err.error.message}`;
                } else {
                  // server-side error
                  errorMessage = `Server Error Code: ${err.status}\nError: ${err.error}\nMessage: ${err.message || err.statusText}`;
                }
                window.alert(errorMessage);

//                    const error = err.error.message || err.statusText;
                return throwError(errorMessage);
    }))
}
}

一切正常，除了我的观察者永远不会收到错误，而不是错误函数被调用，他们总是得到数据函数被调用。我不知道如何通过错误函数从数据服务获取错误数据给观察者。

标签： angularangular-http-interceptors

angular - 将数据服务中的 Angular HttpClient 异常传递回观察者

问题描述

解决方案

推荐阅读