rxjs中多次调用的角度句柄错误

Question

在这种特殊情况下，我不知道用rxjs处理html错误的最佳方式:

component.ts

private open() {
  this.openSubscription = this.openService
    .open(this.id)
    .subscribe(res => {
      if (res) {
        // do something with result
      } else {
        this.openInError = true;
      }
    });
}

打开服务.ts

open(id: number): Observable<OpenContext> {
  const openContextObservable = new Observable<OpenContext>(
  observer => {
  this.openApiService
    .first(id)
    .pipe(
      catchError(err => of(err))
    )
    .subscribe(res => {
      this.openApiService
        .second(res.param1)
        .pipe(
          map(result=> {
            // do something with the result
            observer.next(openContext);
            observer.complete();
          }),
          catchError(err => of(err))
        )
    })
})}

在服务API中，我只是返回this.http.post（…），其中一些参数为可观察的

我想先捕捉错误，并在组件的订阅中处理它(subscribe(res =)

执行此操作并拥有干净代码的最佳方法是什么？我使用throwError进行了测试，…但我被阻止了…

因此，组件中预期的代码将是：

private open() {
  this.openSubscription = this.openService
    .open(this.id)
    .subscribe(
    res => {
      if (res) {
        // do something with result
      }
    },
    err => {
      if (err) {
        this.openInError = true;
      }
    });
}

或类似的东西。管道和地图。

Answer 1

1.） 删除 catchErrors，因为这将捕获错误并将错误流转换为非错误流。

2.） 使用 switchMap 而不是嵌套订阅。

打开服务.ts

import { switchMap } from 'rxjs/operators';
....
open(id: number): Observable<OpenContext> {
  // you can get rid of openContextObservable as well.
  return this.openApiService
    .first(id)
    .pipe(
      // switch to this observable from the first one
      switchMap(res => this.openApiService.second(res.param1)),
      map(result => {
        // do stuff and transformations here but make sure you return result for your subscriber.
        return result;
      })
    );
)}

成分

private open() {
  this.openSubscription = this.openService
    .open(this.id)
    .subscribe(
    res => {
      if (res) {
        // do something with result
      }
    },
    err => {
      if (err) {
        this.openInError = true;
      }
    });
}