español - subscribe angular 4

Error de captura en la tubería combinada de operadores rxjs permutables

Question

Acabamos de actualizar una de nuestras aplicaciones a Angular 5 y comenzamos a realizar la transición a operadores permisibles tal como se presentó en rxjs v5.5.

Debido a esto, hemos reescrito nuestras tuberías observables a la nueva sintaxis con el operador .pipe() .

Nuestro código anterior se vería así, con un .catch() dentro del .switchMap() para no interrumpir la ejecución de los efectos si se produce un error.

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

En el caso de que se dataService un error en la llamada al servicio de dataService se dataService y manejaría (aquí se simplificó el tratamiento de errores).

Con la nueva sintaxis y el uso de .pipe() , ahora tenemos esto

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

¿Cómo puedo capturar de manera similar cualquier error arrojado en la tubería observable, usando la nueva sintaxis?

Answer 1

Después de la refactorización, movió el map de la proyección de switchMap , por lo que cualquier error cerrará el flujo externo. Para mantener ambos flujos equivalentes, debe usar la pipe en la propia proyección de la siguiente manera:

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