Как отловить ошибки http и отобразить сообщение пользователю с помощью магазина / эффектов ngrx? (угловой2 +)

Я пытаюсь взаимодействовать с конечными точками REST API в моем приложении angular 5, используя ngrx.

Выполнить успешный запрос довольно просто, и он работает нормально. Однако, если API регистрирует ошибку в запросе и хочет отправить мое угловое приложение переднего плана обратно, я не уверен, как отобразить ошибку и сообщение для пользователя.

Вот мой эффект авторизации для входа:

@Effect()
  authSignin = this.actions$
    .ofType(AuthActions.TRY_SIGNIN)
    .map((action: AuthActions.TrySignin) => {
      return action.payload;
    })
    .switchMap((authData: { email: string, password: string }) => {
      return this.http.post<any>(this.globals.login, authData);
    })
    .map((returnData: { message: string, auth: { token: string, user_name: string } }) => {
      this.router.navigate(['']);
      localStorage.setItem('token', returnData.auth.token);
      localStorage.setItem('user_name', returnData.auth.user_name);
      return {
        type: AuthActions.SET_AUTH,
        payload: {
          token: returnData.auth.token,
          user_name: returnData.auth.user_name,
          authenticated: true
        }
      };
    })
    .catch((err: any) => {
      console.log(err);
      return {
        type: AuthActions.AUTH_ERROR
      };
    });

В настоящее время, если вы отправите запрос с правильной информацией, вам будет возвращен токен / ваше имя пользователя, и все будет работать нормально.

Однако, если API хочет сообщить вам, что адрес электронной почты / пароль неверен, я не знаю, как зарегистрировать ошибку и сообщить об этом пользователю. Я пробовал искать в другом месте простой в использовании ресурс, но ничего из того, что я нашел, похоже, не работает.

С моим приведенным выше кодом я получаю ошибку компиляции TS:

ОШИБКА в src / app / auth / store / auth.effects.ts (44,12):

ошибка TS2345: аргумент типа '(err: any) = ›{type: string; } 'не может быть назначен параметру типа' (err: any, catch: Observable ‹{type: string; payload: {token: string; user_name: string; authen ... '.

Тип '{тип: строка; } 'не может быть назначен типу' ObservableInput ‹{}› '.

Тип '{тип: строка; } 'нельзя присвоить типу' ArrayLike ‹{}› '.

Свойство 'length' отсутствует в типе '{type: string; } '.

и в консоли после запроса:

ERROR TypeError: вы указали недопустимый объект там, где ожидался поток. Вы можете предоставить Observable, Promise, Array или Iterable.

После того, как я сделал неверный запрос, он больше не позволяет мне делать какие-либо HTTP-запросы из той же формы, мне приходится каждый раз обновлять страницу.

Надеюсь, что кто-то может помочь мне указать правильное направление. Если у вас есть вопросы / вы хотите увидеть больше моего кода, скажите, пожалуйста!


angular ngrx ngrx-effects
person alexc    schedule 07.03.2018    source источник
comment
Взгляните на это, может вам помочь: stackoverflow.com/a/48595961/6294072 Вам нужно создать одноразовый поток чтобы он оставался живым :) Также вам нужно вернуть Observable вашей ошибки.   -  person AJT82    schedule 07.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

Внутри уловки вы не можете отправить объект. Вы должны вернуть Observable, как показано ниже

catch((error) => {
  console.log(error);
  return Observable.of({type: AuthActions.AUTH_ERROR});
})
person Ajantha Bandara    schedule 08.03.2018

arrow_upward
0
arrow_downward

Observable catch - это не то же самое, что и уловка javascript, вам нужно вернуть Observable, иначе он выдаст TypeError, поскольку ему нужно будет развернуть его обратно.

Один из простых способов справиться с этим - заключить ваш объект в метод создания Observable, такой как of.

Так что по сути это было бы

catch((error) => Observable.of({type: AuthActions.AUTH_ERROR}))
person Nico    schedule 10.08.2018