Question

我尝试使用带有promise的angular 2 http创建一个登录应用程序。

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

所以在我从我的restful webservice登录组件得到响应之前，代码就会执行。这只发生在我第一次点击登录按钮。第二次以后我先得到响应，然后执行登录组件代码。

请有人帮助我等待响应来自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

简单：在执行之前获取您想要等待的代码，并将其放在对promise的.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) {
            }
        });
    }

Answer 2

使用箭头功能保留this

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

而不是

.then(this.extractData)

这也可行

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

Angular 2 Http有承诺问题

2 个答案: