Машинопись (Angular) подписаться

Question

Привет, у меня проблема со значением магазина в локальной переменной. Возможно, проблема в подписке функции sync / asyn c.

POST-запрос:

existUser(username) {
return this.http.post(`${API_URL}/existuser`, username);
}

Функция:

 onSubmit() {

    this.basicAuthenticationService.existUser(this.registerForm.value.username).subscribe(
      (data: boolean) => this.existuser = data;

    );
    //this console log is undefined(empty)
    console.log(this.existuser);

Журнал консоли не определен (пусто) Как сохранить данные в локальной переменной. Спасибо

Answer 1

Да, вы правы, это связано с асинхронным вызовом.

Существует несколько способов решения этого случая.

Самый простой способ - работать с переменной внутри подписки. Здесь вы можете очистить хранилище или перейти пользователя по другой ссылке. Например:

onSubmit() {

    this.basicAuthenticationService.existUser(this.registerForm.value.username).subscribe(
      (data: boolean) => {
         this.existuser = data;
         // WORK HERE WITH DATA
         // local Storage cleaning
         // navigation to login page
       });

2-й вариант, если вам нужно запустить еще один http-вызов, вы можете делать все в потоке, просто используя pipe и оператор switchMap / mergeMap / concatMap.

this.basicAuthenticationService.existUser(this.registerForm.value.username)
  .pipe(switchMap(data) => {
    return nextHttp.call()
})
  .subscribe(....)

Answer 2

Вы можете попробовать добавить async / await в функцию onSubmit, чтобы получить ожидаемое поведение. Например:

async onSubmit() {
  this.existUser = await this.basicAuthenticationService.existUser(this.registerForm.value.username).toPromise();

  console.log(this.existuser);
}

это работает путем преобразования вашего наблюдаемого в обещание и ожидания ответа от обещания, прежде чем продолжить.

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