在lettable rxjs运算符的组合管道中捕获错误

Question

我们刚刚将我们的一个应用程序升级到Angular 5，并开始转换到rxjs v5.5中引入的lettable operators。

因此，我们使用.pipe()运算符将我们的可观察流水线重写为新语法。

我们之前的代码看起来像这样，在.catch()中有一个.switchMap()，如果抛出错误就不会中断效果的运行。

@Effect()
loadData$ = this.actions$
.ofType(LOAD_DATA)
.map((action: LoadData) => action.payload)
.withLatestFrom(this.store.select(getCultureCode))
.switchMap(([payload, cultureCode]) => this.dataService.loadData(payload, cultureCode)
  .map(result => {
    if (!result) {
      return new LoadDataFailed('Could not fetch data!');
    } else {
      return new LoadDataSuccessful(result);
    }
  })
  .catch((err, caught) => {
    return Observable.empty();
  });
  );

如果在调用dataService时抛出错误，它将被捕获并处理（简化了错误处理）。

使用.pipe()的新语法和使用，我们现在有了这个

@Effect()
loadData$ = this.actions$
.ofType(LOAD_DATA)
.pipe(
  map((action: LoadData) => action.payload),
  withLatestFrom(this.store.select(getCultureCode)),
  switchMap(([payload, cultureCode]) => this.dataService.loadData(payload, cultureCode)),
  map(result => {
    if (!result) {
      return new LoadDataFailed('Could not fetch data!');
    } else {
      return new LoadDataSuccessful(result);
    }
  })
  );

我怎样才能以类似的方式使用新语法捕获可观察管道中的任何抛出错误？

Answer 1

重构后，你将map移出switchMap投影，所以任何错误都会关闭外部流。要保持两个流等效，您需要在投影本身中使用pipe，如下所示：

import { empty } from 'rxjs;

// ...

@Effect()
loadData$ = this.actions$
.ofType(LOAD_DATA)
.pipe(
  map((action: LoadData) => action.payload),
  withLatestFrom(this.store.select(getCultureCode)),
  switchMap(([payload, cultureCode]) =>
    this.dataService.loadData(payload, cultureCode)
      .pipe(
         map(result => {
           if (!result) {
             return new LoadDataFailed('Could not fetch data!');
           } else {
             return new LoadDataSuccessful(result);
           }
          }),
         catchError((err, caught) => {
           return empty();
         })
      )
  )
);