使用http.get请求初始化变量后未定义

Question

我正在尝试学习一个简单的角度应用程序。我正在使用来自json占位符的在线api作为后端，用于存储我的登录凭据。我正在使用http.get请求检索这些。当我第一次登录时，http请求返回未定义，但是第二次返回正确的凭据。我对此行为感到困惑

我的登录功能：

loginUser(email: string, password: string)
 { 
  this.data.getCreds().subscribe(data => {

  this.mail = data.credentials[0].email;                 
  this.pass = data.credentials[0].password;              
 });

 console.log(this.mail,email,this.pass,password, 'here!!!');

 if(this.mail==email&&this.pass==password)
  {
   this.isLoggedIn = true;
   localStorage.setItem('loggedIn', 'true');
   this.router.navigate(['/admin']);
  }

}

我从数据服务获得的getCreds函数：

     getCreds(): Observable<any>{ return this.http.get("https://my-json-server.typicode.com/divyanshu-avi/login/db").pipe(map(data => data));
    }

Answer 1

您将不会使数据同步，一旦从服务返回数据，订阅块中的代码就会被异步触发。换句话说，预计订阅后，邮件和通行证都不会初始化。

Answer 2

发生此现象的原因是console.log在订阅功能之外。订阅是异步的，这意味着您的console.log可能在获取getCreds响应之前运行。要解决此问题，您需要将console.log放入subscribe函数中，例如以下代码：

loginUser(email: string, password: string)
 { 
  this.data.getCreds().subscribe(data => {

  this.mail = data.credentials[0].email;                 
  this.pass = data.credentials[0].password;              
  console.log(this.mail,email,this.pass,password, 'here!!!');
 });

 if(this.mail==email&&this.pass==password)
  {
   this.isLoggedIn = true;
   localStorage.setItem('loggedIn', 'true');
   this.router.navigate(['/admin']);
  }
}

第二次运行登录方法有效，因为var mail和pas仍然具有第一次运行时的值。

Answer 3

删除地图根本不需要您所有的应用程序

 getCreds(): Observable<any>{ return this.http.get("https://my-json-  server.typicode.com/divyanshu-avi/login/db");

您可以使用setTimeout（）订阅可观察的