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主要做了三件事情，我們把它們整理條列一下：

獲取JSONData（這是Response類型）。
使用JSON.parse()將Data轉換為Json格式進行解析
將結果記錄到主控台中。
而使用新的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（如Auth），我們需要實體化HttpHeaders()對象並將(‘header’, ‘value’)傳遞給函數。

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

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

1	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/

Leo程式筆記

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

前言

新功能

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

Header的簡化語法

如何從Http更改為新的HttpClient：

結論