Переменная не определена после инициализации ее запросом http.get

Question

Я делаю простое угловое приложение, пытаясь выучить угловой. Я использую онлайновый API-интерфейс от json-заполнителя для бэкэнда, в котором хранятся мои учетные данные для входа. Я получаю их с помощью запроса 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

Это происходит потому, что console.log находится за пределами функции подписки. Подписаться является асинхронной, это означает, что ваш console.log может быть запущен до получения ответа getCreds. Чтобы это исправить, нужно поместить console.log в функцию подписки, как показано ниже:

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 2

Удалить карту нет необходимости во всех ваших приложениях

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

Вы можете использовать setTimeout () для подписки наблюдаемого

Answer 3

Вы не получите синхронные данные, код в блоке подписки запускается асинхронно, как только данные возвращаются из службы.Другими словами, ожидается, что после подписки и почта, и пароль не будут инициализированы.