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

我相信您造成了比赛状况。首次登录用户时，服务尚未返回它。相反，您可以像这样记录它：

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调用返回时记录用户。

Answer 2

这是因为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 3

根据this

这应该是您的服务

/** 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);
    });

第一次返回未定义，第二次返回正确的结果，我该如何解决？

3 个答案: