自從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的簡化語法
通常在做網路傳輸的時候，為了在請求中設置自定義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()等相同的方法名稱。
因此大家可以愉快地升級，享受簡潔的語法吧！
以上文章敘述如有錯誤及觀念不正確，請不吝嗇指教:)
有任何家教、案子 或技術相關問題 請都歡迎聯繫我
