如何等待帶有角度的http響應？

Question

得到一個組件（登錄），它調用了我的控制器的服務。 如果登錄失敗，則控制器返回 false，如果成功，則返回用戶的電子郵件。 當我單擊執行函數 OnSubmit() 的按鈕時，我的前端調用該服務。 在這種方法中，如果登錄成功，我想在頁面上重定向用戶，或者在出現問題時發送一條消息。

我的問題是我的服務設法登錄，但由於服務的 http 請求是異步的，所以我的前端不等待響應並且 this.Email 的值為“未定義”。

我應該怎么做才能等待 http 響應（在我的組件或我的服務中）？

這是我的函數 OnSubmit()：

  onSubmit() {
    var user = {
      'Email': this.userForm.Email,
      'Password': this.userForm.Password,
    }
    this.authService.login(user).subscribe(result => {
      this.Email = result.value;
      console.log("connected with :" + this.Email);
    });

    if (this.Email == false) {
      this.Message = "wrong login or password."
    }
    else {
      this.router.navigateByUrl("dashboard");
    }   
  }

我的服務：

  login(user: any): Observable<any> {
    return this.http.post<any>(this.baseUrl + '/login', user, httpOptions);
  }

還有我的控制器：

[HttpPost("/login")]
public async Task<IActionResult> Login([FromBody] LoginVM loginVM)
{
    if (ModelState.IsValid)
    {
        var result = await _signInManager.PasswordSignInAsync(
            loginVM.Email,
            loginVM.Password,
            loginVM.RememberMe,
            false
        );
        if (result.Succeeded)
        {
            return Ok(Json(loginVM.Email));
        }
        else
        {
            return Ok(Json(false));
        }
    }
    return Ok(Json(false));
}

非常感謝你的回答：）

Answer 1

不要試圖強制它同步，而是在將結果分配給this.Email之后立即將結果檢查移動到訂閱中的“成功”處理程序中

Answer 2

您還可以將 observable 轉換為 onSubmit() 方法上的 Promise （使其異步）並使用 await：

let result = await this.authService.login(user).toPromise();
this.Email = result.value;
console.log("connected with :" + this.Email);
if (this.Email == false) {
  this.Message = "wrong login or password."
}
else {
  this.router.navigateByUrl("dashboard");
}