如何等待带有角度的http响应？答案

【问题标题】：how to await an http response with angular?如何等待带有角度的http响应？
【发布时间】：2019-05-23 01:01:43
【问题描述】：

有一个组件（登录）调用向我的控制器抛出了服务。如果登录失败，控制器将返回 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));
}

非常感谢您的回答:)

【问题讨论】：

Angular alternative to subscribe?的可能重复

标签： angular

【解决方案1】：

不要试图强制它同步，而是在将结果分配给this.Email 之后立即将结果检查移到订阅中的“成功”处理程序中

【讨论】：

【解决方案2】：

您也可以在 onSubmit() 方法上convert the observable to a 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");
}

【讨论】：