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