Первый раз вернуть неопределенный и второй правильный результат, как я могу это исправить?

Question

У меня проблема с вызовом на веб-сервисе с использованием Angular 7. В моем сервисе осуществляется вызов таким образом:

getLogin(usr: String, pwd: String) {
    return this.http.post("the url of webservice", { username: usr, password: pwd 
    });
}

и на моем компоненте:

 credenzialiConfronto() {
this.cred.getLogin(this.loginForm.get("username").value, this.loginForm.get("psw").value).subscribe((res => {
  this.User = res;
}));

console.log(this.User);

почему он возвращает undefined в первый раз, а во второй раз нет?

РЕДАКТИРОВАТЬ:

на моем компоненте, я пытаюсь это сейчас, но не работает:

https://imgur.com/a/LJ5o4HW

и на моем обслуживании:

https://imgur.com/gUe3sh5

Answer 1

Это потому, что javascript - это asynchronous, поэтому он не будет ждать завершения вызова API.В своем коде вы регистрируете User вне области подписки. Если вы войдете в подписку, вы получите данные user при первом вызове.В вашем коде нет ничего плохого.

Для обеспечения синхронности JavaScript вы можете реализовать async await

async callerFunction() {
   await this.credenzialiConfronto();
   console.log(this.User);
}

credenzialiConfronto() {
return new promise ((resolve, reject) => {
  this.cred.getLogin(this.loginForm.get("username").value, 
   this.loginForm.get("psw").value).subscribe((res => {
   this.User = res;
   resolve();
}));
})

Answer 2

согласно это

это должен быть ваш сервис

/** POST: data to the database */
login(email, password) : Observable<any>{
return this._http.post<any>(this.APIURL+`login`, { email:email, password:password})
.pipe(map(user => {
  return user;
}));

}

это должен быть ваш компонент

   this._loginService.login(this.model.email, this.model.password)
  .subscribe(
    data => {
      this.toast.success(data[constants.MESSAGE]);
    },
    error => {
      this.toast.warning(constants.LOGIN_ERROR);
    });

Answer 3

Я полагаю, вы вызвали состояние гонки. При первом входе в систему пользователь еще не был возвращен службой. Вместо этого вы можете войти как:

credenzialiConfronto() {
  this.cred.getLogin(this.loginForm.get("username").value, this.loginForm.get("psw").value)
  .pipe(
    tap(user => console.log(user))
  )
  .subscribe((res => {
    this.User = res;
}));

С этим изменением вы регистрируете пользователя только после возврата вызова getLogin.