詳解使用angular的HttpClient搭配rxjs

2019-11-19 15:35:35

字體：大中小

來源：轉載

供稿：網友

一、原Http使用總結

使用方法

1.在根模塊或核心模塊引入HttpModule

即在AppModule或CoreModule中引入HttpModule：

import { HttpModule } from '@angular/http';@NgModule({ import: [ HttpModule ] // ...})AppModule {}

2.在使用的地方注入Http服務

import { Http } from '@angular/http';// ...constructor( private http: Http) {}ngOnInit() { this.http.get(`url`).subscribe((res) => {// 成功回調 }, (err) => {// 失敗回調 });}// ...

3.使用可選參數

若想在請求中添加特定的頭部或者身體，就需要配置請求的可選參數：

import { Http, Header } from '@angular/http';// ...this.http.delete(`url`, {headers: new Header(), body: { } }).subscribe(...);// ...

缺陷

已知缺陷之一為不支持文件傳輸，如果想要寫一個文件上傳的客戶端，就只能使用JS原生的XMLHttpRequest對象，然后自己封裝上rxjs得到一個較通用的文件上傳服務，可以參考 ngx-uploader。

另一個不能算缺陷的缺陷是Http請求得到的響應結果必須手動執行json()以得到json格式的結果。

二、改用HttpClient

HttpClient能力在angular 4.3版本開始引入在@angular/common/http中

使用方法

基本使用方法與原Http服務類似，先引入HttpClientModule，然后注入HttpClient服務使用：

import { HttpClientModule } from '@angular/common/http';// ...@NgModule({ import: [ HttpClientModule ]})// ...

import { HttpClient } from '@angular/common/http';// ...constructor( private http: HttpClient) {}// ...this.http.get('url').subscribe((res) => { // 成功回調}, (err) => { // 失敗回調});// ...

添加額外頭部等信息的話類似原Http服務，引入相關的變量后填入第二個可選參數即可。

改進與加強

1.支持更多類型的請求，比如更改可選參數的responseType值可改為直接請求text內容
2.不再需要手動調用json()來將結果轉為json格式，訂閱到的結果已經是body且轉為了json(請求text的話直接就是text內容)。
3.支持監聽請求進度(可用于文件上傳)。
4.添加了攔截器能力，用于預設請求規則和響應預處理。

缺陷

已知的一個小缺陷是，delete請求不能再添加body作為可選參數了，這個略尷尬，難道批量刪除也得乖乖把參數拼到url中。。。

三、攔截器

本文暫不討論文件上傳以及請求進度的監聽能力，可以查看官網的相關內容，本文主要來講攔截器的簡單使用。

給應用注入攔截器的效果是，所有的HttpClient發起的請求都將執行這個攔截器，類似Node中的中間件。且無論是請求之前的預處理還是得到響應后的預處理都能做到。

筆者想到的第一個用處就是不再需要寫一個自己的Http服務來代執行angular的Http服務了，以往如果想要給應用的所有請求都添加比如認證功能的請求頭的話，比較好的辦法就是自己建立一個MyHttp服務來代為調用Http方法，并在請求回調中添加統一的結果處理。

攔截器屬于特殊服務，實現了HttpInterceptor類：

import {Injectable} from '@angular/core';import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';@Injectable()export class MyInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(req); }}

編輯好攔截器后需要注入到根模塊中：

import {NgModule} from '@angular/core';import {HTTP_INTERCEPTORS} from '@angular/common/http';@NgModule({ providers: [{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true, }],})export class AppModule {}

預處理請求

所有工作都在攔截器中的intercept方法中進行，如果要給所有請求加一個認證頭部，可以操作其中的req參數，注意req參數為只讀的，必須執行其clone方法得到副本來操作，處理完的副本通過next參數發射出去即可：

public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { let authInfo = {token: 'testtoken', admin: 'testadmin'}; const authReq = req.clone({  headers: req.headers  .set('Authorization', authInfo.token || '')  .set('Admin', authInfo.admin || '')  .set('Content-Type', 'application/json;charset=UTF-8') }); return next.handle(authReq);}

這樣實際使用請求時可以直接使用HttpClient，所有請求都會實現添加配置好的頭部信息。

響應預處理

請求得到結果后，往往需要對結果進行一些判斷，比如某些錯誤是請求本身的錯誤，這些錯誤會直接拋出到rxjs的error流中，某些請求本身是成功的，但是是屬于一些服務器邏輯給出的錯誤，這類錯誤如果不做處理是會被認為是成功的請求而直接next到成功回調的，這會導致最終訂閱請求時，錯誤的回調要做錯誤處理，成功回調中也存在需要做錯誤處理，感覺成功還得分為成功地成功和成功地失敗，很尷尬：

someReq().subscribe((res) => { if (res.state) { // 真正成功 } else { // 還是失敗 }}, (err) => { // 失敗});

通過攔截器可以對請求結果進行重新整理，保證成功回調必然成功，失敗回調必然失敗：

return next.handle(authReq).map((event) => { if (event instanceof HttpResponse) { switch (event.status) {  case 200:  if (event.body['state']) {  let newEvent = event.clone({body: event.body['data']});  return newEvent;  } else {  throw event.body['msg'];  }  case 401:  this.storage.remove('auth_token');  this.router.navigate(['/login']);  default:  throw `【${event.status}】【${event.statusText}】`; } } return event;});

響應預處理的一句話總結就是操作intercept方法返回的next.handle(req)，使用rxjs的map操作符進行映射。

四、搭配rxjs

rxjs是angular嚴重依賴的一個大坑，初次接觸會被其創建和訂閱這種使用方式搭配一大堆眼花繚亂的操作符弄得一臉懵逼。

創建-訂閱的請求方式

原Http和新的HttpClient兩個服務流嚴重依賴了rxjs，請求的發起返回的是一個Observable對象，其定義好后并不會直接發起請求，真正發起請求是在執行其subscribe方法的時候，此方法接收三個參數，分別是成功回調、失敗回調和完成回調。

Promise的套路是請求在定義(調用)的時候就發起了，然后迎來的是一連串的then()和catch()。可以從catch中resolve到then，或者從then中reject到catch。

rxjs的套路則是先創建出一個觀察者對象(Observable)，可以用許多操作符定義許多規則，比如個人感覺很接近then的map操作符，以及接近catch的catch操作符。可以從map操作符中直接throw到錯誤回調，或者在catch操作符中捕捉錯誤并返回新的成功的流。這一切都不會觸發這個請求，只有最終subscribe()的時候，才會真正執行整個請求，并在三種回調中體現。