Angular 4.3.0-rc.0 版本已經(jīng)發(fā)布🐦。在這個版本中，我們等到了一個令人興奮的新功能 - HTTPClient API 的改進版本，以后媽媽再也不用擔心我處理 HTTP 請求了😆。

HttpClient 是已有 Angular HTTP API 的演進，它在一個單獨的 @angular/common/http 包中。這是為了確?，F(xiàn)有的代碼庫可以緩慢遷移到新的 API。

接下來讓我們開啟 Angular 新版Http Client 之旅。

安裝

首先，我們需要更新所有的包到 4.3.0-rc.0 版本。然后，我們需要在 AppModule 中導入 HttpClientModule 模塊。具體如下：

import { HttpClientModule } from '@angular/common/http';@NgModule({ declarations: [  AppComponent ], imports: [  BrowserModule,  HttpClientModule ], bootstrap: [AppComponent]})export class AppModule { }

現(xiàn)在一切準備就緒。讓我們來體驗一下我們一直期待的三個新特性。

特性一 默認 JSON 解析

現(xiàn)在 JSON 是默認的數(shù)據(jù)格式，我們不需要再進行顯式的解析。即我們不需要再使用以下代碼：

http.get(url).map(res => res.json()).subscribe(...)

現(xiàn)在我們可以這樣寫：

http.get(url).subscribe(...)

特性二 支持攔截器 (Interceptors)

攔截器允許我們將中間件邏輯插入管線中。

請求攔截器 (Request Interceptor)

import { HttpRequest, HttpHandler, HttpEvent} from '@angular/common/http';@Injectable()class JWTInterceptor implements HttpInterceptor {  constructor(private userService: UserService) {}  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {  const JWT = `Bearer ${this.userService.getToken()}`;  req = req.clone({   setHeaders: {    Authorization: JWT   }  });  return next.handle(req); }}

如果我們想要注冊新的攔截器 (interceptor)，我們需要實現(xiàn) HttpInterceptor 接口，然后實現(xiàn)該接口中的 intercept 方法。

export interface HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>;}

需要注意的是，請求對象和響應對象必須是不可修改的 (immutable)。因此，我們在返回請求對象前，我們需要克隆原始的請求對象。

next.handle(req) 方法使用新的請求對象，調(diào)用底層的 XHR 對象，并返回響應事件流。

響應攔截器 (Response Interceptor)

@Injectable()class JWTInterceptor implements HttpInterceptor { constructor(private router: Router) {}  intercept(req: HttpRequest < any > ,  next: HttpHandler): Observable < HttpEvent < any >> {  return next.handle(req).map(event => {    if (event instanceof HttpResponse) {     if (event.status === 401) {      // JWT expired, go to login     }    }    return event;   }  }}