Angular, HttpClient, subscribe 401时不捕获错误

Question

我的代码有些奇怪。我的服务中有这个，非常基本，一个简单的 httpClient 获取...当 API returns 状态为 401 时，我希望它能运行进入错误......但它没有。在我的控制台中，我只有 'complete'。当 API return 状态为 200 时，它在 'next' 中表现良好有什么想法吗？

import { HttpClient } from '@angular/common/http';
...
  constructor(
    private httpClient: HttpClient,
    private configService: ConfigService
  ) {}

  getUserDetails() {
    console.log('AuthService.getUserDetails');
    return this.httpClient
      .get<UserDetails>(this.configService.getModuleCoreAPi('users.details'))
      .subscribe({
        next: (ud) => {
          console.log('next', ud);
          this.userInfos.next(ud);
        },
        error: (error) => {
          console.log('error', error);
        },
        complete: () => console.log('complete'),
      });
  }
...

更新 1：这也不起作用

  getUserDetails() {
    console.log('AuthService.getUserDetails');
    this.httpClient
      .get<UserDetails>(this.configService.getModuleCoreAPi('users.details'))
      .pipe(
        catchError((err) => {
          throw 'error in source. Details: ' + err;
        })
      )
      .subscribe(
        (ud) => {
          console.log('next', ud);
          this.userInfos.next(ud);
        },
        (error) => {
          console.log(error);
        }
      );
  }

也不

  getUserDetails() {
    console.log('AuthService.getUserDetails');
    this.httpClient
      .get<UserDetails>(this.configService.getModuleCoreAPi('users.details'))
      .pipe(
        catchError(err => {
          throw 'error in source. Details: ' + err;
        })
      )
      .subscribe({
        next: (ud) => {
          console.log('next', ud);
          this.userInfos.next(ud);
        },
        error: (err) => console.log(err),
      });
  }

更新2 如果我强制 API 到 return 500 状态代码，它会按预期传递到错误

Answer 1

我通常为此使用 rxjs catchError()。

this.httpClient
  .get<UserDetails>(this.configService.getModuleCoreAPi('users.details'))
  .pipe(catchError((error) => console.log(error))
  .subscribe((ud) => this.userInfos.next(ud));

Answer 2

您正在解构“订阅”方法返回的第一个参数。删除第一个大括号：

.subscribe(
        (ud) => {
          console.log('next', ud);
          this.userInfos.next(ud);
        },
        (error) => {
          console.log('error', error);
        },
        () => console.log('complete')
      );

Answer 3

好吧，我忘了启用拦截器并捕获 401 状态代码...需要休息 ;)

Angular, HttpClient, subscribe 401时不捕获错误

Angular, HttpClient, subscribe do not catch the error when 401

angular