在可管道化 rxjs 运算符的组合管道中捕获错误 [英] Catch error in combined pipe of pipeable rxjs operators

问题描述

我们刚刚将我们的一个应用程序升级到 Angular 5，并开始过渡到 可出租操作符，在 rxjs v5.5 中引入.

We've just upgraded one of our applications to Angular 5, and started to transition into lettable operators as introduced in rxjs v5.5.

因此，我们使用 .pipe() 运算符将可观察管道重写为新语法.

Because of this, we have rewritten our observable pipelines to the new syntax with the .pipe() operator.

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

Our previous code would look like this, with a .catch() inside the .switchMap() as to not interrupt the running of effects if an error is thrown.

@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 时抛出错误，它将被捕获并处理(此处简化了错误处理).

In the case of an error thrown in the call to the dataService it would be caught and handled (simplified the error handling here).

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

With the new syntax and use of .pipe(), we now have this

@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);
    }
  })
  );

如何使用新语法以类似的方式捕获可观察管道中任何抛出的错误?

How can I in a similar fashion catch any thrown errors in the observable pipeline, using the new syntax?

推荐答案

重构后，您将 map 移出 switchMap 投影，因此任何错误都会关闭外部流.为了保持两个流相同，您需要在投影本身中使用 pipe ，如下所示:

After refactoring you moved map out of switchMap projection, so any error will close the outer stream. To keep both streams equivalent, you need to use pipe in the projection itself like that:

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;
         })
      )
  )
);

这篇关于在可管道化 rxjs 运算符的组合管道中捕获错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！