Angular2 Http

1. 使用Http

絕大部分應用程序都會和後臺服務打交道,Http是瀏覽器和服務器之間通信的主要協議,經過Http調用來訪問遠程服務器上相應的 Web API。json

HttpModule 並非 Angular 的核心模塊,經過Angular包中一個名叫 @angular/http 的獨立附屬模塊發佈了出來。咱們的應用將會依賴於Angular的 http 服務,它自己又依賴於其它支持類服務。來自 @angular/http 庫中的 HttpModule 保存着這些 HTTP 相關服務提供商的全集。api

現代瀏覽器支持兩種基Http的API : XMLHttpRequest (XHR) 和 JSONP 。少數瀏覽器還支持 Fetch 。在Angular中分別對應@angular/http 庫中的HttpModule 和JsonpModule兩個模塊。瀏覽器

2. GET獲取數據

爲了可以使用XHR中的Get方法來獲取數據信息,咱們把 HttpModule 添加到 AppModuleimports 列表中,這樣本應用程序的任何地方均可以訪問XHR服務。安全

咱們使用Http服務的實例中的get方法來執行http get方法獲取數據,該方法的調用形式以下服務器

get(url: string, options?: RequestOptionsArgs) : Observable<Response>網絡

來看一個簡單的例子,代碼以下app

@Component({異步

selector: 'demo',async

template: '<button id="input" (click)="click()">Get Data</button>',函數

})

export class DemoComponent {

constructor(private http: Http) {

}

url: string = '/api/list';

click() {

this.http.get(this.url).subscribe(function (data) {

console.log(data)

})

}

}

咱們在DemoComponent構造函數中採用DI獲取了Http服務的實例http,當點擊獲取數據的按鈕後,便可以經過Http實例中的get方法,根據其參數url地址及options?: RequestOptionsArgs參數來獲取對應的數據信息。該方法返回的是一個可觀察對象 (Observable),針對可觀察對象,咱們能夠subscribe對應的方法,當數據返回後進行處理。

3. POST發送數據

一樣的,爲了可以使用XHR中的POST方法來獲取數據信息,咱們把 HttpModule 添加到 AppModuleimports 列表中,這樣本應用程序的任何地方均可以訪問XHR服務。

咱們使用Http服務的實例中的post方法來執行http post方法獲取數據,該方法的調用形式以下

post(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response>

來看一個簡單的例子,代碼以下

@Component({

selector: 'demo',

template: '<button id="input" (click)="click()">Get Data</button>',

})

export class DemoComponent {

constructor(private http: Http) {

}

url: string = '/api/post';

click() {

let headers = new Headers({ 'Content-Type': 'application/json' });

let options = new RequestOptions({ headers: headers });

this.http.post(this.url, JSON.stringify({ 'id': '1' }), options).subscribe(function (data) {

console.log(data)

})

}

}

咱們在DemoComponent構造函數中採用DI獲取了Http服務的實例http,當點擊獲取數據的按鈕後,便可以經過Http實例中的get方法,根據其參數url地址, body:any及options?: RequestOptionsArgs參數來提交對應的數據信息,其中body表示傳遞到服務器端的數據信息。示例中,咱們傳遞json格式的數據到服務器端,因此使用了'Content-Type': 'application/json'頭信息進行包裝。

該方法返回的是一個可觀察對象 (Observable),針對可觀察對象,咱們能夠subscribe對應的方法,當數據返回後進行處理。

4. JSONP獲取數據

用 Angular Http 服務發起 XMLHttpRequests,是與服務器通信時最經常使用的方法。但它不適合全部場景。

出於安全的考慮,網絡瀏覽器會阻止調用與當前頁面不「同源」的遠端服務器的XHR。所謂源就是 URI 的協議 (scheme) 、主機名 (host) 和端口號 (port) 這幾部分的組合。這被稱爲同源策略。

爲了能夠向不一樣源的服務器發起 XHR 請求,這時候就須要支持一種老的、只讀的 ( 譯註:即僅支持 GET) 備選協議,這就是 JSONP。

爲了可以使用JSONP中的Get方法來獲取數據信息,咱們把 JsonpModule 添加到 AppModuleimports 列表中,這樣本應用程序的任何地方均可以訪問Jsonp服務。

Angular的Jsonp服務不但經過JSONP 擴展了Http 服務,並且限制咱們只能用GET請求,調用的形式以下。

get(url: string, options?: RequestOptionsArgs) : Observable<Response>

咱們來看一個例子,該示例和Http Get訪問十分相似,

@Component({

selector: 'demo',

template: '<button id="input" (click)="click()">Get Data</button>',

})

export class DemoComponent {

constructor(private jsonp: Jsonp) {

}

url: string = '/api/list';

click() {

this.jsonp.get(this.url).subscribe((data) => {

console.log(data);

});

}

}

5. 結果處理

5.1 可觀察對象

咱們經過Http以及Jsonp的api接口能夠知道,默認返回值都是可觀察對象 Observable< Response >。能夠把可觀察對象 Observable 看作一個由某些「源」發佈的事件流。 經過 訂閱 到可觀察對象 Observable ,咱們監聽(subscribe)這個流中的事件。 在這些訂閱中,咱們指定了當 Web 請求生成了一個成功事件 ( 有效載荷是英雄數據 ) 或失敗事件 ( 有效載荷是錯誤對象 ) 時該如何採起行動,如示例中所示。

咱們的服務能夠返回 HTTP 響應對象Response。但這可不是一個好主意! 數據服務的重點在於,對消費者隱藏與服務器交互的細節。其實上,咱們最關心的仍是獲取到的返回數據信息,這時候咱們就能夠利用RxJS庫來對事件流進行一些額外的處理。

RxJS("Reactive Extensions" 的縮寫)是一個被 Angular 承認的第三方庫,它實現了異步可觀察對象 (asynchronous observable) 模式。Rxjs庫中包含不少對事件流進行處理的方法,例如map,distinctUntilChanged等操做符。

針對返回數據是json格式的響應對象,能夠把Response解析成 JavaScript 對象——只要調一下 response.json() 就能夠了,這時候咱們就能夠利用map操做符來進行處理,例如

this.jsonp.get(this.url)

.map((rsp:Response)=>{

return rsp.json()

})

.subscribe((data) => {

console.log(data);

});

5.2 Promise

雖然 Angular 的 http 客戶端 API 返回的是 Observable<Response> 類型的對象,但咱們也能夠把它轉成 Promise<Response>。這很容易,只須要調用可觀察對象 Observable< Response >的方法toPromise()就可以進行轉化。例如

this.jsonp.get(this.url)

.toPromise()

.then((rsp: Response) => {

console.log(rsp)

});

相關文章
相關標籤/搜索