Angular http RXJS observable 不调用错误回调

Question

我有一个 Angular 项目，它使用 RXJS observables。一切都很好，除非我必须处理错误处理，但是当 API 返回错误时，永远不会调用错误回调。

 this.http
  .post(url, registerFormData)
  .pipe(
    catchError((err) => {
      console.log(err);
      return throwError(err);
    })
  )
  .subscribe(
    (res) => console.log('HTTP response', res),
    (err) => console.log('HTTP Error', err),
    () => console.log('HTTP request completed.')
  );


// package.json
"@angular/animations": "^10.0.14",
"@angular/common": "~10.0.5",
"@angular/compiler": "~10.0.5",
"@angular/core": "~10.0.5",
"@angular/forms": "~10.0.5",
"@angular/localize": "~10.0.5",
"@angular/platform-browser": "~10.0.5",
"@angular/platform-browser-dynamic": "~10.0.5",
"@angular/router": "~10.0.5",
"@ng-bootstrap/ng-bootstrap": "^7.0.0",
"bootstrap": "^4.5.0",
"fs-extra": "^9.0.1",
"ng2-file-upload": "^1.4.0",
"ngx-toastr": "^13.0.0",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"

Answer 1

对此我很抱歉，但我自己设法找到了解决方案。

如果管理员认为这很方便，请将其放在这里，因为它可以帮助其他人，如果不是，可以将其删除。

所以我有一个 http 错误拦截器并且没有正确返回可观察到的错误，所以它一定在管道函数的某个地方失败了。奇怪的是，如果错误对象丢失，RXJS 都不会抛出错误，角度也不会抛出错误。

export class TokenInterceptorService implements HttpInterceptor {

构造函数( 私有存储：StorageService， 私人通知者：NotificationService ) {}

公共拦截（请求：HttpRequest，下一个：HttpHandler）{ const token = this.storage.get('token') || '';

const updatedRequest = request.clone({
  setHeaders: {
    Authorization: `Bearer ${token}`,
  },
  responseType: 'text',
});

return next.handle(updatedRequest).pipe(
  catchError((err: any) => {
    if (err instanceof HttpErrorResponse && err.status === 401) {
      this.notificator.error(
        'Session expired, you are being redirected to home screen'
      );
      this.storage.remove('token');
      this.storage.remove('user');

      setTimeout(() => {
        location.reload();
      }, 1000);
    }
    // return of([err]); // not working ...
    return throwError(err); // this is now working as throwError returns the 
    proper error observable, which invokes the error callback in subsribe 
    callbacks. 
  })
);

} }