как бросить ошибку в switchMap в эффекте ngrx
Я использую ngrx8, rxjs6 и angular 9
После входа в систему мне нужно позвонить в другую службу. когда эта служба выдает ошибку, я хочу, чтобы часть моего эффекта catchError ее обработала, проблема в том, что я улавливаю ошибку в try catch и вижу журнал, но catchError
не запускается.
Упрощенный код
login$ = createEffect(() => { return this.actions$.pipe(
ofType(AuthActions.login),
switchMap((action) =>
this.userService.login(action.userName, action.password)
.pipe(
switchMap((token) => {
return throwError(new Error('hello'));
}),
map((token) => AuthActions.loginSuccess()),
catchError((error) => {
console.error('error', error); // I don't see this in console
return of(AppError({ error }));
})),
),
catchError((error) => {
console.error('error 2', error);
return of(AppError({ error }));
}),
);
});
Мой настоящий код
login$ = createEffect(() => { return this.actions$.pipe(
ofType(AuthActions.login),
switchMap((action) =>
this.userService.login(action.userName, action.password)
.pipe(
switchMap(async (token) => {
try {
await this.matrixService.initClient(action.userName, action.password);
return of(token);
}
catch (error) {
console.log('catch error', error); // I see this in console
return throwError(error);
}
}),
map((token) => AuthActions.loginSuccess()),
catchError((error) => {
console.error('error', error); // I don't see this in console
return of(AppError({ error }));
})),
),
catchError((error) => {
console.error('error 2', error);
return of(AppError({ error }));
}),
);
});
консольный вывод

Ответы
Вместо того, чтобы использовать Async-Await
синтаксис для ожидания завершения Promise
возвращаемого matrixService.initClient
объекта (что не будет работать в текущем контексте из-за того, что switchMap
оператор не ждет async
функций), рассмотрите возможность его возврата, не дожидаясь его, поскольку он будет преобразован в Observable
(благодаря switchMap
оператору принимает Promise
), что приводит this.userService.login
к ожиданию.
login$ = createEffect(() => this.actions$
.pipe(
ofType(AuthActions.login),
switchMap(({ userName, password }) => this.userService.login(userName, password)
.pipe(
switchMap(() => this.matrixService.initClient(userName, password)),
map((token) => AuthActions.loginSuccess()),
catchError((error) => {
console.error('error', error);
return of(AppError({ error }));
})
)
),
catchError((error) => {
console.error('error 2', error);
return of(AppError({ error }));
})
)
);
на основе комментариев я немного изменю предыдущие ответы
login$ = createEffect(() => this.actions$
.pipe(
ofType(AuthActions.login),
switchMap(({ userName, password }) => this.userService.login(userName, password)
.pipe(
map((token) => AuthActions.loginSuccess())
tap(() => this.matrixService.initClient(userName, password)),
)
),
catchError((error) => {
console.error('error 2', error);
return of(AppError({ error }));
})
)
);
Я меняю порядок, всегда стреляю, AuthActions.loginSuccess()
а потом this.matrixService.initClient(userName, password)
.
catchError
не нужно вызывать дважды, любая ошибка, сгенерированная при вызове службы, будет перехвачена самым внешним catchError
оператором.