小編給大家分享一下如何使用angular的HttpClient搭配rxjs，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為四方臺等地區(qū)用戶提供了全套網頁設計制作服務，及四方臺網站建設行業(yè)解決方案。主營業(yè)務為網站設計制作、成都網站建設、四方臺網站設計，以傳統(tǒng)方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

一、原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請求得到的響應結果必須手動執(zhí)行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.支持監(jiān)聽請求進度(可用于文件上傳)。
4.添加了攔截器能力，用于預設請求規(guī)則和響應預處理。

缺陷

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

三、攔截器

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

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

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

攔截器屬于特殊服務，實現了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參數為只讀的，必須執(zhí)行其clone方法得到副本來操作，處理完的副本通過next參數發(fā)射出去即可：

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) => {
 // 失敗
});

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

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嚴重依賴的一個大坑，初次接觸會被其創(chuàng)建和訂閱這種使用方式搭配一大堆眼花繚亂的操作符弄得一臉懵逼。

創(chuàng)建-訂閱的請求方式

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

Promise的套路是請求在定義(調用)的時候就發(fā)起了，然后迎來的是一連串的then()和catch()?？梢詮腸atch中resolve到then，或者從then中reject到catch。

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

以上是“如何使用angular的HttpClient搭配rxjs”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯成都網站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁名稱：如何使用angular的HttpClient搭配rxjs-創(chuàng)新互聯
本文來源：http://aaarwkj.com/article4/cojeie.html

成都網站建設公司_創(chuàng)新互聯，為您提供全網營銷推廣、小程序開發(fā)、虛擬主機、域名注冊、網頁設計公司、服務器托管

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯