Angular2：Http异步调用

Question

我正在使用来自 Angular2 的 Http 服务：

我的登录组件：

    doLogin() {
        this.authenticationService.inValidateSession();    
 this.authenticationService.userConfiguration=this.httpService.login(this.user.email,this.user.password)
        this.router.navigate(['/site']);

    }

一旦用户提交凭据，登录并使旧会话无效。
会做服务器登录
并将保存从服务器获取的用户配置，如名称和组... _ 并将重定向到默认主页。

HttpService

login(username:string,password:string) {
     let headers = new Headers();
     this.createAuthorizationHeader(headers,username,password);
     this.http.get(this.url,{headers:headers}).subscribe(this.extractData,this.handleError);
     return this.configFromLogin;  
}

private extractData(res: Response) {
  if(res.status==200){
    let body = res.json();
    var result={"config":body,
                "x-xsrf-token":res.headers.get('x-xsrf-token')};
    this.configFromLogin=result;
  }
  else{
    //console.log(error);
    // throw exception or use this.error() method
  }
}

由于服务器提供了我们需要用于所有Post请求的令牌身份验证，我将其保存在会话中。

我的问题或疑惑：

当我调试 doLogin() 代码时 首先执行 (saveInSession) 甚至 在执行 HttpService extractData 之前。为什么？我知道 Http get 是异步调用，但我怎样才能让 doLogin 等待？
在 HttpService 中，我正在检查响应是否为 200，然后我正在保存它否则我想抛出错误并使用 HandleError 方法，我在 Observable 的订阅方法中使用它。可能吗？

请帮我解决以上两个问题，有问题我可以回答。

谢谢

Answer 1

你的问题是你在调用 router.navigate 之前没有等待 http 请求完成。

您的服务应该 return 一个可观察对象，以便告诉调用组件请求已完成并且一切都可以导航。

登录组件

    doLogin() {
        this.authenticationService.inValidateSession();    
        this.httpService.login(this.user.email,this.user.password).subscribe(result => {
            this.authenticationService.userConfiguration=result;
            this.router.navigate(['/site']);
        }, 
        error => {
            console.error(error);
        });
    }

HttpService

login(username:string,password:string):Observable<any> {
     let headers = new Headers();
     this.createAuthorizationHeader(headers,username,password);

     //We will return the http observable, mapped with our auth function
     return this.http.get(this.url,{headers:headers}) 
     .map(this.extractData);//We bind the authentication process on the observable
}

private extractData(res: Response) {
    if(res.status !== 200){
        throw new Error('Not a 200, bla bla details');
    }
    let body = res.json();
    var result={"config":body,
                "x-xsrf-token":res.headers.get('x-xsrf-token')};
    return result;
}

编辑：我在extractData方法中添加了一个throw，它允许你抛出一个错误，该错误将被[=15=捕获] 并在 subscribe 的 onError 参数中处理。

Angular2：Http异步调用

Angular 2: Http asynchronous call

angular

angular2-services