Return Liste von Typoskript Funktion tun HTTP GET

Question

Ich habe ein Verfahren:

products = [] 
getAllProducts(){ 
    this.http.get 
    (this.baseUrl + '/products').map((resp:Response) => resp.json()) 
     .subscribe(
     (data) => { 
      const products = data; 
      this.products = products; 
     }, 
     err => {} 
    ); 
    } 

es funktioniert, ordnet korrekt empfangen Liste Produkte variabel. Ich möchte es in eine Funktion ändern, die obige Liste zurückgibt, damit ich diesen Code als Dienst von einer anderen Komponente wiederverwenden kann. Ich habe versucht, so etwas wie dieses:

getAllProducts(){ 
    let localProds = []; 
    this.http.get 
    (this.baseUrl + '/products').map((resp:Response) => resp.json()) 
     .subscribe(
     (data) => { 
      const products = data; 
      localProds = products; 
     }, 
     err => {alert("ERROR: GET localhost:3000/products "); localProds = ['ERROR'];} 
    ); 
    return localProds; 
    } 
this.products = this.getAllProducts(); 

ich denke, es sollte funktionieren, wenn es nicht der Fall ist. Ich habe zwei Fragen:

1) Warum funktioniert die obige Lösung nicht?

2) Wie diese Funktion die Empfangsliste zurückgibt, in diesem Fall die JSON-Liste.

EDIT: Ich stimme zu, dass Frage Nr. 2 möglicherweise als ein Duplikat markiert wurde, wenn ich nur die Tatsache wusste, dass ein solches Problem als asynchroner Aufruf überhaupt existiert. Da ich das nicht wusste, finde ich immer noch meine ganze Frage (beide Teile davon) einzigartig für Leute wie mich, Neulinge für Frontend-Entwicklung, die den Begriff "asynchroner Anruf" nicht kennen.

Answer 1

Der Kommentar beantwortet Ihre erste Frage ... weil es asynchron ist, können Sie den Wert nicht so zurückgeben.

Dies ist, was meine Service-Methode wie folgt aussieht:

getProducts(): Observable<IProduct[]> { 
    return this._http.get(this._productUrl) 
     .map((response: Response) => <IProduct[]> response.json()) 
     .catch(this.handleError); 
} 

Und der Code, der den Dienst in der Komponente aufruft sieht wie folgt aus:

ngOnInit(): void { 
    this._productService.getProducts() 
      .subscribe(products => this.products = products, 
         error => this.errorMessage = <any>error); 
} 

Die subscribe Methode bewirkt, dass das http erhalten auszuführen . Wenn die asynchrone Antwort empfangen wird, wird die als das erste Argument der subscribe-Methode übergebene Funktion ausgeführt, die die lokale Produktvariable auf die Produkte setzt, die vom Dienst zurückgegeben werden.

Ich habe ein vollständiges Beispiel hier: [? Wie kann ich die Antwort von einem asynchronen Aufruf zurückkehren] https://github.com/DeborahK/Angular2-GettingStarted