2017-07-16 58 views
131

我想知道哪一個用來構建模擬Web服務來測試Angular程序?角度4中的HTTP和HTTPClient之間的區別?

+5

[* 「的HttpClient是現有的角HTTP API,它存在 它沿着在一個單獨的封裝的進化...」 *](https://github.com/angular/angular /提交/ 37797e2)。 – jonrsharpe

+1

昨天我在博客上寫了一些新功能:http://blog.jonrshar.pe/2017/Jul/15/angular-http-client.html – jonrsharpe

+4

https://angular.io/guide/http – yurzui

回答

209

如果你使用4.3.x版角及以上使用來自HttpClientModuleHttpClient類:

import { HttpClientModule } from '@angular/common/http'; 

@NgModule({ 
imports: [ 
    BrowserModule, 
    HttpClientModule 
], 
... 

class MyService() { 
    constructor(http: HttpClient) {...} 

這是一個從@angular/http模塊的http的升級版具有以下改進:

  • 攔截器允許中間件邏輯插入流水線
  • 不可變的請求/響應ob jects
  • 兩個要求上傳和響應進度事件下載

您可以瞭解它是如何工作的Insider’s guide into interceptors and HttpClient mechanics in Angular

  • 類型化,同步響應體訪問,包括JSON體類型
  • JSON載體是假定默認和不再需要顯式地解析
  • 後請求驗證&平齊基於測試框架

繼續前進舊的http客戶端將被棄用。這裏是鏈接到commit messagethe official docs

另外要注意的是舊的HTTP使用Http類令牌,而不是新的HttpClient注:

import { HttpModule } from '@angular/http'; 

@NgModule({ 
imports: [ 
    BrowserModule, 
    HttpModule 
], 
... 

class MyService() { 
    constructor(http: Http) {...} 

此外,新HttpClient似乎需要在運行時tslib,所以你必須安裝它npm i tslib和更新system.config.js如果你使用SystemJS

map: { 
    ... 
    'tslib': 'npm:tslib/tslib.js', 

而你需要,如果你使用SystemJS添加另一個映射:

'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js', 
+0

我想導入HttpClientModule。但'@ angular/common/http'不存在於使用「npm start」命令安裝的node_modules目錄中。你能幫我嗎? –

+1

@DheerajKumar,你使用的是哪個版本?它只在4.3.0以上可用 –

+0

我從git下載了角度快速啓動。和在package.json中,「@ angular/common」:「^ 4.3.0」存在。但沒有@ angular/common/http。 –

13

不想重複,只是在其他的方式總結:

    從JSON的一個對象
  • 自動轉換
  • 響應類型定義
  • 事件引發
  • 標題的簡化語法
  • 攔截器

我寫了一篇文章,介紹了舊的「http」和新的「HttpClient」之間的區別。目標是以最簡單的方式解釋它。

Simply about new HttpClient in Angular

相關問題