Oczekiwanie na odpowiedź z serwera na żądanie http w Angular 2

Question

Mam mały problem z moją aplikacją Angular2. Chcę uzyskać dane z serwera dla mojego loginu użytkownika, ale mój kod idzie dalej i mam z tym wiele błędów. Chcę poczekać na odpowiedź od serwera, a następnie zrobić coś z moimi danymi.

To jest mój kod:

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; 
    } 

Jak zauważył mój kod będzie dla pętli, dopóki nie dostanę odpowiedź z serwera, więc wrócę tylko pustą tablicę. Czy ktoś może mi w tym pomóc?

Answer 1

W usłudze powinieneś zwrócić Observable, którą Twój komponent może zasubskrybować. Nie działa tak, jak to robisz ze względu na tryb asynchroniczny żądania get.

jako propozycja, usługa może wyglądać podobnie do tego

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()); 
} 

oraz odpowiedniej części swojego komponentu jak ten:

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

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