Angular 2同步Http服务

Question

目前我在 angular js 2 中面临有关登录身份验证的问题。 因为我在以下代码中面临有关异步的问题。

   import { Injectable } from '@angular/core';

   import { Http } from '@angular/http';
   import { UserData } from './UserData';
   import 'rxjs/add/operator/map'
   import 'rxjs/add/operator/toPromise'

   @Injectable()
   export class LoginserviceService {

   userData = new UserData('','');

   constructor(private http:Http) { }

  callService(username:string,passwrod:string):boolean {
    var flag : boolean;      
   (this.http.get('http://localhost:4200/data.json').
   map(response => response.json())).subscribe(
     data => this.userData = data ,
     error => alert(),
     () => {
       flag = this.loginAuthentication(username,passwrod);
    }           
  );     
  return flag;
 }

loginAuthentication(username:string,passwrod:string):boolean{
 if(username==this.userData.username && passwrod==this.userData.password){
   return true;
 }else{
   return false;
 }
 }

当我在传递当前用户名和密码后执行此代码时，它仍然返回 false。

return flag

正在执行之前

 flag = this.loginAuthentication(username,passwrod);

最后我得到的结果是错误的。

是否有任何解决方案，如果我可以在 Angular 2 中使用同步方法或 promise 。

下面是组件代码

import { Component, OnInit } from '@angular/core';
import { LoginserviceService } from '../loginservice.service';

@Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'] 
})
export class LoginComponent implements OnInit {
model:any={};

constructor(private service : LoginserviceService) { 

 }

 ngOnInit() {

 }
 save() {

 var flag =  this.service.callService(this.model.userName,this.model.passWord);
  if(flag==true)
   {
    console.log("login Successfully done-----------------------------")
    this.model.success = "Login Successfully done";
   }

}

}  

Answer 1

我认为您的问题是正确的 - 这是一个同步/异步问题。您正在进行的 http 调用本质上是异步的，我认为这就是您应该如何处理它们。

我建议您在您的服务中返回一个可观察对象并在您的组件类中处理响应 - 这是您的代码，对服务类进行了最少的调整:

callService(username:string,passwrod:string):Observable<boolean> {
    var flag : boolean;      
    return (this.http.get('http://localhost:4200/data.json').
    map(response => response.json())).
    map(data => {
        this.userData = data;
        return this.loginAuthentication(username,passwrod);
    });
}

然后在您的组件类中，您现在可以像这样调用保存方法:

save() {
    this.service.callService(this.model.userName,this.model.passWord).
    subscribe(
        success => {
            if(success) {
                console.log("login Successfully done-----------------------------");
                this.model.success = "Login Successfully done";
            },
        error => console.log("login did not work!")
    );
}

现在应该可以了。我没有测试代码，所以它可能不会开箱即用，但我希望重点是清楚的。