試水新的Angular4 HTTP API

本文來自網易雲社區

做者：梁月康

原文：https://netbasal.com/a-taste-from-the-new-angular-http-client-38fcdc6b359b

Angular更新了新的 4.3.0-rc.0 版本。在這個版本里，咱們能夠發現更新了咱們一直期待的新功能 —— 一個革新了的HTTP Client API

HttpClient 是對現存的Angular HTTP API 一次進化，現有的HTTP API存在於一個單獨的包中，即@angular/common/http。 這樣的結構確保了已有的代碼庫能夠慢慢更新到新的API而不至於出現斷崖的更新

安裝

首先，咱們須要更新包版本到 4.3.0-rc.0 版本。 接下來，咱們須要把 HttpClientModule 引入到咱們的 AppModule 裏

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

`

如今咱們準備好了。讓咱們來看看三個使人期待的新功能

默認使用JSON

JSON 做爲默認的數據格式而再也不須要明確地寫出來須要解析

咱們不再須要寫下以下的代碼

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

如今咱們只須要寫下

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

攔截器（Interceptors）支持

攔截器 容許在 管道語法（pipeline）中注入中間件

\\request-interceptor.tsimport {
  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);
  }
}

`

若是咱們想要註冊一個新的攔截器，咱們須要去實現（implements）這個 HttpInterceptor 接口（interface）。這個接口有一個方法咱們必需要去實現 —— 即攔截器

這個攔截器方法將會給咱們一個請求對象（the Request object）、HTTP處理器（the HTTP handler）而且返回一個HttpEvent 類型的可觀察對象（observable）

請求和返回對象須要是不可改變的。所以，咱們須要在返回以前提早拷貝一個原始請求

接下來，next.handle(req) 方法將會調用一個帶上新請求的底層的XHR而後返回一個返回事件的事件流（stream）

\\interceptor-response.ts@Injectable()class JWTInterceptor implements HttpInterceptor {

  constructor(private router: Router) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {    return next.handle(req).map((event: HttpEvent<any>) => {      if (event instanceof HttpResponse) {        // do stuff with response if you want
      }
    }, (err: any) => {      if (err instanceof HttpErrorResponse {        if (err.status === 401) {           // JWT expired, go to login
        }
      }
    });
  }
}

`

攔截器也能夠選擇經過應用附加的 Rx 操做符來轉換響應事件流對象，在next.handle()中返回。

最後咱們須要去作的註冊該攔截器，使用 HTTP_INTERCEPTORS 註冊 multi Provider：

[ { provide: HTTP_INTERCEPTORS, useClass: JWTInterceptor, multi: true } ]

進度事件

進度事件能夠既用於請求上傳也能夠用於返回的下載

\\http-progress.ts

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

http.request(new HttpRequest(  'POST',
  URL,
  body, 
  {
    reportProgress: true
  })).subscribe(event => {  if (event.type === HttpEventType.DownloadProgress) {    // {
    // loaded:11, // Number of bytes uploaded or downloaded.
    // total :11 // Total number of bytes to upload or download
    // }
  }  if (event.type === HttpEventType.UploadProgress) {    // {
    // loaded:11, // Number of bytes uploaded or downloaded.
    // total :11 // Total number of bytes to upload or download
    // }
  }  if (event.type === HttpEventType.Response) {
    console.log(event.body);
  }

})

```

若是咱們想要得到上傳、下載進度的提示信息，咱們須要傳 { reportProgress: true }給 HttpRequest對象

這裏還有兩個新的功能咱們今天沒有提到：

基於內部測試框架的 Post-request verification 和 flush 功能 類型化，同步響應體訪問，包括對 JSON body類型的支持。

以上只是對新的HTTP API和它的新功能的概述，完整的代碼能夠看 angular/packages/common/http

譯者注

應該在哪裏註冊攔截器呢？

\\app.module.ts@NgModule({ 
  imports: [ BrowserModule ], 
  providers: [ 
  { provide: HTTP_INTERCEPTORS, useClass: JWTInterceptor, multi:   true } 
],  declarations: [ AppComponent ], 
  bootstrap: [ AppComponent ] 
}) 
export class AppModule { }