为什么我的可观察对象没有捕获错误并停止工作

Question

我有一张表格。用户输入输入，然后向后端发送http请求以获取数据。

在我的 HTML 模板中

data$ | async

在组件代码中我首先有：

  data$: Observable<DataResponse> = this.userInput$.asObservable()
      .pipe(
          tap(() => this.loadingService.show()),
          switchMap(userInput => this.dataService.getData(
              userInput.textInput,
              userInput.numberInput).pipe(
                  finalize(() => this.loadingService.hide())
              )
          )
      );

没有错误的情况下工作正常。但是当 this.dataService.getData(...) 返回错误时（HttpErrorResponse）；可观察对象现在停止发送请求。

我尝试在很多地方添加catchError，但似乎不起作用。即使出现错误，catchError 似乎也不会捕获任何内容。任何建议将不胜感激坦克。

  data$: Observable<DataResponse> = this.userInput$.asObservable()
      .pipe(
          tap(() => this.loadingService.show()),
          switchMap(userInput => this.dataService.getData(
              userInput.textInput,
              userInput.numberInput).pipe(
              catchError(error => {
                console.error('Error occurred:', error);
                return of(null);
              }),
                  finalize(() => this.loadingService.hide())
              )
          )
      );

Answer 1

您的代码很好，直接在 switchMap 中捕获错误的想法是正确的，但这仅在

this.dataService.getData()

抛出

throwError

错误时有效，例如：

return throwError(() => new Error("oh nooo"));

但如果它抛出这样的错误，它就不起作用：

 throw new Error('oh noooo');

。

所以你要做的就是将

this.dataService.getData()

包装在 try/catch 块中。这应该可以解决你的问题

Answer 2

在您的服务中手动抛出错误，因为

catchError

仅当在可观察流中看到错误时才会触发。

例如：

 of('day', 'midday', 'night')
    .pipe(
      map(timeOfDay => {
        if (timeOfDay === 'midday') {
          throw 'too early!';
        }
        return timeOfDay;
      }),
      catchError(err => {
        console.log(err) // 'too early!'
      })
    )