如何在angular2中正確使用http服務？

Question

我創建了以下組件，它是一個小型演示，因此我在此處使用服務而不是創建單獨的服務。

export class AppComponent {  
    @Input() takeInput:string; 
    @Output() result; 
    constructor(private http: Http) { }; 

    public onSubmit(value: any){ 
     this.takeInput = value; 

     this.getAll(value.url); //below console.log prints first then the one prints which is written inside this getAll method. 

     console.log("this prints first", this.result); //returns undefined 
     //How do I use this.result here which gets set once getAll() execution is finished. 
    } 

這裏是調用服務，並獲取數據的方法：

private getAll (url){ 
    return this.http.get(url) 
     .map((res: Response) => res.json()) 
     .subscribe((res: Object) => { 
      this.result = res; 
      console.log("this prints second",this.result); // returns proper response 
     }); 
    } 
} 

如何可以等待觀察到的返回數據，然後使用這些數據在我的調用方法的onsubmit（）或任何其他方式繼續使用this.result作爲其他方法的參數執行。

Answer 1

你可以重構你的getAll方法這樣搬出認購上相應的觀察到：

private getAll(){ 
    let url = "https://something"; 
    return this.http.get(url) 
    .map((res: Response) => res.json()); 
    } 
} 

，並使用它像這樣：

public onSubmit(value: any){ 
    this.takeInput = value.takeInput; 
    this.getAll().subscribe(result => { 
    console.log(result); 
    this.result = result; 
    console.log(this.result); 
    }); 
}