Angular - 簡單介紹Angular中的HttpClient(HttpClient V.S Http)

自從Angular 4.3版以後,新的網路傳輸HttpClient在Angular中被引入。

 而官方在Angular第五版開始,將舊的 HttpModule被標示為不建議使用,因此在此為各位介紹為什麼官方要採用HttpClient,而捨棄舊的Http

新功能

我們來看看第五版HttpClient的新功能。

自動轉換為從JSON到一個對象

當我們從網路接收數據時,我們在Api當中會使用JSON格式來進行回傳。 為了能夠在我們的程式當中處理這些JSON數據,我們需要根據我們得到的JSON數據創建一個對象。

讓我們看一個使用舊Angular http基本範例:

getData() { 
  this.http.get('yourAPI') 
      .map(x=> JSON.parse(x.data)) 將每一個資料轉換成json格式
      .subscribe(x=> console.log(x);) 輸出json格式資料
}

上述的Code主要做了三件事情,我們把它們整理條列一下:

  1. 獲取JSONData(這是Response類型)。
  2. 使用JSON.parse()將Data轉換為Json格式進行解析
  3. 將結果記錄到主控台中。

而使用新的HttpClient 我們的Code只需要這樣:

getData() { 
  this.http.get('yourAPI') 
      .subscribe(x=> console.log(x);) 輸出json格式資料
}

另外我們也可以使用泛型透過衍生型類別來訂定資料:

getData() { 
  this.http.get<User>('yourAPI') 
      .subscribe(x:User => console.log(x);) 輸出json格式資料,有了泛型我們就可以使用提示字元來取得欄位資料
}

Header的簡化語法

通常在做網路傳輸的時候,為了在請求中設置自定義Header(如Auth),我們需要實體化HttpHeaders()對象並將('header', 'value')傳遞給函數。

const headers = new HttpHeaders().set('Content-Type', 'text');

在這個例子中,我們將Content-TypeHeader設置為text ( application/json是默認值)。

 const headers = new HttpHeaders().set('Content-Type', 'text').append('Authorization', 'CustomToken');

 如何從Http更改為新的HttpClient:

  • 第一步是確保安裝了適當的Angular版本,即4.3和更高版本。

  • 在項目的Module中用HttpClientModule替換HttpModule 。 新的HttpClientModule應該從@angular/common/http導入。
// Old import { HttpModule } from '@angular/http'; 

   @NgModule({ ... imports: [ HttpModule, ], ... })

// New import { HttpClientModule } from '@angular/common/http'; 
   @NgModule({ ... imports: [ HttpClientModule, ], ... })
// Old Http

import { Http, Headers } from '@angular/http'; 

@Injectable() export class ExampleService { 

  private _headers = new Headers({'Authentication': 'Token'}); 
  constructor(private http: Http) {}
  public getData() { 
  return this.http.get('youtAPI', this._headers)
                  .map((x) => { return JSON.parse(x.body); })
                  .subscribe(x=> console.log(x));  




// New HttpClient

import { HttpClient, HttpHeaders } from '@angular/common/http'; 

@Injectable() export class ExampleService { 
 
private _headers = {headers: new HttpHeaders().set('Authentication', 'Token')}; 

constructor(private http: HttpClient) { } 

public getData() { 
  
  return this.http.get('youtAPI', this._headers).subscribe(x=> console.log(x); 

 }

結論

基本上,語法沒有很大的變化。 HttpClient保留了舊的http: http.get() , http.post()等相同的方法名稱。

因此大家可以愉快地升級,享受簡潔的語法吧!

 

以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/