Angular 2有承諾問題的Http

Question

我嘗試使用帶有承諾的角2 http創建登錄應用程序。

issue is before printing the response object in extractData function in service, "Got response" console is printing from login component. 

因此，在從我的安靜的web服務登錄組件獲得響應之前，代碼被執行。這隻發生在我第一次點擊登錄按鈕。第二次起先獲得響應，然後執行登錄組件代碼。

請有人幫助我如何等待，直到響應來自webservice。

please find my code below. 

Login component 

import {Component} from '@angular/core'; 
import { Router} from '@angular/router'; 

import {User} from '../model/user'; 
import {UserService} from '../service/user-service'; 

@Component({ 
    selector : 'login-form', 
    templateUrl : 'app/template/login.html', 
    providers : [ 
     UserService 
    ] 
}) 

export class LoginComponent{ 

    user: User; 

    constructor(private userService: UserService,private router: Router){} 

    loginUser(form: any): void { 
     this.userService.loginUser(form.username,form.password).then(user => this.user = user) 
     console.log("Got response"); 
     //console.log(this.user); 
     try { 
      console.log(this.user.userID); 
      console.log(this.user.name); 
      console.log(this.user.mobile); 
      console.log(this.user.email); 
      this.router.navigate(['/']); 
     } 
     catch(err) { 
     } 
    } 
} 

And my service 

import { Injectable } from '@angular/core'; 
import { Headers, Http, Response, RequestOptions } from '@angular/http'; 

import '../rxjs-operators'; 

import {User} from '../model/user'; 

@Injectable() 
export class UserService{ 

    private userUrl = 'http://localhost:8080/khalibottle/user/'; 
    private headers = new Headers({ 'Content-Type': 'application/json' }); 

    constructor(private http:Http){} 

    getUsers(): Promise<User[]> { 
    return this.http.get(this.userUrl + "list") 
        .toPromise() 
        .then(this.extractData) 
        .catch(this.handleError); 
    } 

    loginUser (userName,password): Promise<User> { 
     let body = JSON.stringify({ userName, password }); 
     let options = new RequestOptions({ headers: this.headers }); 
     return this.http.post(this.userUrl + "login",body,options) 
        .toPromise() 
        .then(this.extractData) 
        .catch(this.handleError); 
    } 

    registerUser (name,mobile,email,password,roleID): Promise<string> { 
    let body = JSON.stringify({ name, mobile, email, password, roleID }); 
    let options = new RequestOptions({ headers: this.headers }); 
    return this.http.post(this.userUrl + "register",body,options) 
        .toPromise() 
        .then(this.extractData) 
        .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     console.log(body); 
     return body || { }; 
    } 

    private handleError(error: any) { 
     console.error('An error occurred', error); 
     return Promise.reject(error.message || error); 
    } 
} 

Answer 1

使用箭頭功能保留this

.then((val) => this.extractData(val)) 

，而不是

.then(this.extractData) 

這也將工作

.then(this.extractData.bind(this)) 

Answer 2

簡單：取要等待代碼在執行前ng，並把它放在.then()的承諾中。任何和.then()（或.catch()等）之外的任何內容都不會等待。您在第二次和以後的點擊中看到的成功是一種錯覺，每次都使用前一次調用的結果。

像這樣：

loginUser(form: any): void { 
     this.userService.loginUser(form.username, form.password).then(user => { 
      this.user = user; 
      console.log("Got response"); 
      //console.log(this.user); 
      try { 
       console.log(this.user.userID); 
       console.log(this.user.name); 
       console.log(this.user.mobile); 
       console.log(this.user.email); 
       this.router.navigate(['/']); 
      } 
      catch(err) { 
      } 
     }); 
    }