【问题标题】：Variable is undefined after initializing it with an http.get request使用 http.get 请求初始化变量后未定义变量
【发布时间】：2019-06-18 20:34:45
【问题描述】：

我正在制作一个简单的角度应用程序来尝试学习角度。我正在使用来自 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));
    }

【问题讨论】：

How do I return the response from an Observable/http/async call in angular?的可能重复

标签： javascript angular xmlhttprequest

【解决方案1】：

您不会同步获取数据，只要从服务返回数据，订阅块中的代码就会异步触发。也就是说，预计订阅后，mail和pass都没有初始化。

【讨论】：

【解决方案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 仍然具有第一次运行时的值。

【讨论】：

【解决方案3】：

你的应用程序完全不需要删除地图

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

你可以使用 setTimeout() 来订阅 observable

【讨论】：