http - 在 Angular 2 中等待服务器对 http 请求的答复

Question

我的 Angular2 应用程序有点问题。我想从服务器获取一些数据用于我的用户登录，但我的代码正在运行，但我有很多错误。我想等待服务器的回答，然后对我的数据做一些事情。

这是我的代码:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { User } from './user';

@Injectable()

export class UserService {

    public usersTmp: Array<Object> = new Array<Object>();
    public users: Array<User>;
    public user: User = new User();
    public noteToSend;
    constructor(private http: Http) { }

    getUsers() {
        var headers = new Headers();
        headers.append('Accept', 'q=0.8;application/json;q=0.9');

        this.http.get('/AngularApp/api/users', { headers: headers })
            .map((res: Response) => res.json())
            .subscribe(
            data => {
                console.log(data);
                this.usersTmp = data;
            },
            err => console.error(err),
            () => console.log('done')
            );

        this.users = new Array<User>();
        for (var i = 0; i < this.usersTmp.length; i++) {
            this.user = new User();
            this.user.id = this.usersTmp[i]["userId"];
            this.user.name = this.usersTmp[i]["userName"];
            this.user.email = this.usersTmp[i]["userEmail"];
            this.user.pass = this.usersTmp[i]["userPassword"];

            this.users.push(this.user);

        }
        return this.users;
    }

因为我注意到我的代码将进入 for 循环，直到我从服务器得到答案，所以我只返回空数组。任何人都可以帮助我吗？

Answer 1

在服务中，您应该返回您的组件可以订阅的Observable。由于 get 请求的异步模式，它无法按照您的方式工作。

作为提议，您的服务可能与此类似

getUsers() {
    let headers = new Headers();
    headers.append('Accept', 'q=0.8;application/json;q=0.9');

    return this.http.get('/AngularApp/api/users', { headers: headers })
        .map((res: Response) => res.json());
}

你的组件的相关部分是这样的:

 constructor(private userService:UserService) {
    this.userService.getUsers().subscribe(
      data => this.iterateOverUsers(data));
 }

 iterateOverUsers(data) {
   // here comes your for loop
 }