javascript - 使用 rxjs 重放主题的 Http 错误处理程序拦截器配置 - Angular

Question

我在尝试获取错误值并通过 html 元素显示自定义错误消息时遇到问题。我正在使用重播主题来存储错误并管理拦截器中的错误状态。我将拦截器正确导入到组件中，并在我的模块中正确提供它。我很困惑为什么从 API 获取错误响应时没有显示我的错误。

这是我到目前为止所拥有的

errorHandlerInterceptor.service.ts

export class ErrorHandlerInterceptor implements HttpInterceptor {

  error: ReplaySubject<string> = new ReplaySubject<string>(1);

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request)
      .pipe(
        retry(1),
        catchError((error: HttpErrorResponse) => {
          let errorMessage = '';
          if (error.error instanceof ErrorEvent) {
            // client-side error
            errorMessage = `Error: ${error.error.message}`;
          } else {
            // server-side error
            errorMessage = `Error Code: ${error.status}`;
          }
          //window.alert(errorMessage);

          this.error.next(errorMessage);

          return throwError(this.error);
        })
      )
  }
}

然后在 html 中，我通过异步管道传输重播主题，以便仅在重播主题具有值时才显示错误消息。

组件.html

<div
    *ngIf="errorHandlerInterceptor.error | async"
    class="app-alert--error"
  >
    <p class="app-alert__title">
      ERROR
    </p>
    <p id="error-message">
      {{ errorHandlerInterceptor.error | async }}
    </p>
</div>

非常感谢任何帮助或建议!

Answer 1

在我看来，将拦截器导入组件内并不是一个好的模式。

解决此问题的一种方法可能是使用将错误传播给其使用者的服务。从我的 Angular 来看，这样我们就可以实现更好的关注点分离。

错误.service.ts

@Injectable({
    providedIn: 'root'
})
export class ErrorService {
    private errorStore = new BehaviorSubject(null);
    public error$ = this.errorStore.asObservable();

    emitError (err) {
        this.errorStore.next(err);
    }
}

foo.component.ts

@Component{/* ... */}
export class FooComponent {

    get currentError$ () {
        return this.errorService.error$;
    }

    constructor (private errorService: ErrorService) { }
}

foo.component.html

<!-- ... -->

<div *ngIf="currentError$ | async">
    Error!
</div>

<!-- ... -->

error.interceptor.ts

constructor (private errorService: ErrorService) { }

intercept (/* ... */) {
    return next.handle(req)
        .pipe(
            /* ... */
            catchError(err => {
                /* ... */

                // If error found
                this.errorService.emitError(errorMessage);

                /* ... */
            }),
        )
}