保持错误信息和外部 observable 活着

Question

为确保错误不会完成 outer observable，我采用的常见rxjs effects 模式是：

 public saySomething$: Observable<Action> = createEffect(() => {

    return this.actions.pipe(

      ofType<AppActions.SaySomething>(AppActions.SAY_SOMETHING),

      // Switch to the result of the inner observable.
      switchMap((action) => {
        // This service could fail.
        return this.service.saySomething(action.payload).pipe(
          // Return `null` to keep the outer observable alive!
          catchError((error) => {
            // What can I do with error here?
            return of(null);
          })
        )
      }),

      // The result could be null because something could go wrong.
      tap((result: Result | null) => {
        if (result) {
          // Do something with the result!
        }
      }),

      // Update the store state.
      map((result: Result | null) => {
        if (result) {
          return new AppActions.SaySomethingSuccess(result);
        }
        // It would be nice if I had access the **error** here. 
        return new AppActions.SaySomethingFail();
      }));
});

请注意，如果底层网络调用失败 (service.saySomething(action.payload))，我在 inner observable 上使用 catchError 来保持 outer observable 活动： p>

catchError((error) => {
  // What can I do with error here?
  return of(null);
})

随后的tap 和map 运算符通过允许null（即(result: Result | null)）在其签名中适应这一点。但是，我丢失了错误信息。最终，当最终的 map 方法返回 new AppActions.SaySomethingFail(); 时，我丢失了有关错误的任何信息。

我怎样才能在整个管道中保留错误信息，而不是在被捕获时丢失它？

Answer 1

按照 cmets 的建议，您应该使用 Type guard function

很遗憾，我无法在 sn-p 中运行 typescript，所以我注释了 types

const { of, throwError, operators: {
    switchMap,
    tap,
    map,
    catchError
  }
} = rxjs;

const actions = of({payload: 'data'});

const service = {
  saySomething: () => throwError(new Error('test'))
}

const AppActions = {
}

AppActions.SaySomethingSuccess = function () {
}
AppActions.SaySomethingFail = function() {
}

/* Type guard */
function isError(value/*: Result | Error*/)/* value is Error*/ {
  return value instanceof Error;
}

const observable = actions.pipe(
  switchMap((action) => {
    
    return service.saySomething(action.payload).pipe(
      catchError((error) => {
        return of(error);
      })
    )
  }),
  tap((result/*: Result | Error*/) => {
    if (isError(result)) {
      console.log('tap error')
      return;
    }
    
    console.log('tap result');
  }),
  map((result/*: Result | Error*/) => {
    if (isError(result)) {
      console.log('map error')
      return new AppActions.SaySomethingFail();
    }
    
    console.log('map result');
    return new AppActions.SaySomethingSuccess(result);
  }));
  
  observable.subscribe(_ => {

  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>

Answer 2

我不会尝试在整个管道中保留错误信息。相反，您应该将成功管道（tap、map）与错误管道（catchError）分开，方法是将所有运算符添加到它们应该实际使用其结果的可观察对象，即您的内部可观察对象。

public saySomething$: Observable<Action> = createEffect(() => {

    return this.actions.pipe(
      ofType<AppActions.SaySomething>(AppActions.SAY_SOMETHING),
      switchMap((action) => this.service.saySomething(action.payload).pipe(
        tap((result: Result) => {
          // Do something with the result!
        }),
        // Update the store state.
        map((result: Result) => {
          return new AppActions.SaySomethingSuccess(result);
        }),
        catchError((error) => {
          // I can access the **error** here. 
          return of(new AppActions.SaySomethingFail());
        })
      )),     
    );
});

这种方式tap 和map 只会在this.service.saySomething 的成功结果上执行。将所有错误副作用和错误映射移至catchError。