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

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

一、原Http使用總結(jié)

使用方法

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

即在AppModule或CoreModule中引入HttpModule：

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

2.在使用的地方注入Http服務(wù)

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

3.使用可選參數(shù)

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

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

缺陷

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

另一個不能算缺陷的缺陷是Http請求得到的響應(yīng)結(jié)果必須手動執(zhí)行json()以得到j(luò)son格式的結(jié)果。

二、改用HttpClient

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

使用方法

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

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) => {
 // 成功回調(diào)
}, (err) => {
 // 失敗回調(diào)
});
// ...

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

改進(jìn)與加強

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

缺陷

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

三、攔截器

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

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

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

攔截器屬于特殊服務(wù)，實現(xiàn)了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 {}

預(yù)處理請求

所有工作都在攔截器中的intercept方法中進(jìn)行，如果要給所有請求加一個認(rèn)證頭部，可以操作其中的req參數(shù)，注意req參數(shù)為只讀的，必須執(zhí)行其clone方法得到副本來操作，處理完的副本通過next參數(shù)發(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，所有請求都會實現(xiàn)添加配置好的頭部信息。

響應(yīng)預(yù)處理

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

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

通過攔截器可以對請求結(jié)果進(jìn)行重新整理，保證成功回調(diào)必然成功，失敗回調(diào)必然失?。?/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;
});

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

四、搭配rxjs

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

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

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

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

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

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

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

網(wǎng)頁名稱：如何使用angular的HttpClient搭配rxjs-創(chuàng)新互聯(lián)
本文來源：http://www.rwnh.cn/article4/cojeie.html

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

廣告

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