如何在Angular 2中調用簡單的http GET服務

Question

我正在學習Angular 2，並試圖在頁面加載時調用一個簡單的HTTP Get請求，以獲取JSON數據並在頁面加載時處理該JSON。誰能告訴我一些基本的例子如何做到這一點？我從Beta版中看到大多數網絡解決方案。

Answer 1

要獲得可觀察的，您可以按照下面的示例。 getStories方法使用注入的HTTP服務並返回一個可觀察值，它可以進一步用於獲取響應。

@Injectable() 
export class StoriesService { 

    constructor(private http:Http,private constService :ConstantsService) { } 

    public getStories() 
    { 
     this.http 
      .get(this.constService.apiBaseUrl + "Stories/Stories") 
      .subscribe ((data: Response) => console.log(data)); 
    } 
} 

這是一個簡單的HTTP獲取服務示例。

Answer 2

創建類似的服務：

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

export class MyService { 
    constructor(public http: Http) { } 

    private extractData(res) { 

    if (res.status < 200 || res.status >= 300) { 
     throw new Error('Bad response status: ' + res.status); 
    } 

    // console.log(res.json()); 
    this.serviceData = (res.json()); 
    return this.serviceData || {}; 
    } 

    loaddata(): Observable<any> { 
    return this.http.get(this.server_url) // define a variable server_url to assign the requested url 
     .map(this.extractData); 
    } 
} 

現在在組件的ngOnInit方法通過調用該服務的方法得到的值。

class MyComponent{ 
    constructor(public _myService: MyService) 
    ngOnInit(){ 
     this._myService.loaddata().subscribe(data => { 
     // do something with the data 
    }) 

    } 
}