angular.js4使用 RxJS 處理多個 Http 請求
有時候進入某個頁面時，我們需要從多個 API 地址獲取數(shù)據然后進行顯示。管理多個異步數(shù)據請求會比較困難，但我們可以借助 Angular Http 服務和 RxJS 庫提供的功能來實現(xiàn)上述的功能。處理多個請求有多種方式，使用串行或并行的方式。
基礎知識
mergeMap
mergeMap 操作符用于從內部的 Observable 對象中獲取值，然后返回給父級流對象。
合并 Observable 對象
const source = Rx.Observable.of('Hello');
//map to inner observable and flatten
const example = source.mergeMap(val => Rx.Observable.of(`${val} World!`));
const subscribe = example.subscribe(val => console.log(val)); //output: 'Hello World!'
在上面示例中包含兩種 Observable 類型：
- 源 Observable 對象 - 即 source 對象
- 內部 Observable 對象 - 即 Rx.Observable.of(`${val} World!`) 對象
僅當內部的 Observable 對象發(fā)出值后，才會合并源 Observable 對象輸出的值，并最終輸出合并的值。
forkJoin
forkJoin 是 Rx 版本的 Promise.all()，即表示等到所有的 Observable 都完成后，才一次性返回值。
合并多個 Observable 對象
const getPostOne$ = Rx.Observable.timer(1000).mapTo({id: 1});
const getPostTwo$ = Rx.Observable.timer(2000).mapTo({id: 2});
Rx.Observable.forkJoin(getPostOne$, getPostTwo$).subscribe(
res => console.log(res) // [{id: 1}, {id: 2}]
);
處理 Http 請求
我們先來看一下 Angular Http 服務簡單示例。
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
template: `
<p>HttpModule Demo</p>
`
})
export class AppComponent implements OnInit {
constructor(private http: Http) { }
ngOnInit() {
this.http.get('https://jsonplaceholder.typicode.com/users')
.map(res => res.json())
.subscribe(users => console.log(users));
}
}
上面示例中，我們通過依賴注入方式注入 http 服務，然后在 ngOnInit() 方法中調用 http 對象的 get() 方法來獲取數(shù)據。這個例子很簡單，它只處理一個請求，接下來我們來看一下如何處理兩個請求。
Map 和 Subscribe
有些時候，當我們發(fā)送下一個請求時，需要依賴于上一個請求的數(shù)據。即我們在需要在上一個請求的回調函數(shù)中獲取相應數(shù)據，然后在發(fā)起另一個 HTTP 請求。
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-root',
template: `
<p>{{username}} Detail Info</p>
{{user | json}}
`
})
export class AppComponent implements OnInit {
constructor(private http: Http) { }
apiUrl = 'https://jsonplaceholder.typicode.com/users';
username: string = '';
user: any;
ngOnInit() {
this.http.get(this.apiUrl)
.map(res => res.json())
.subscribe(users => {
let username = users[6].username;
this.http.get(`${this.apiUrl}?username=${username}`)
.map(res => res.json())
.subscribe(
user => {
this.username = username;
this.user = user;
});
});
}
}
在上面示例中，我們先從 https://jsonplaceholder.typicode.com/users 地址獲取所有用戶的信息，然后再根據指定用戶的 username 進一步獲取用戶的詳細信息。雖然功能實現(xiàn)了，但有沒有更好的解決方案呢？答案是有的，可以通過 RxJS 庫中提供的 mergeMap 操作符來優(yōu)化上述的流程。
mergeMap
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
@Component({
selector: 'app-root',
template: `
<p>{{username}} Detail Info</p>
{{user | json}}
`
})
export class AppComponent implements OnInit {
constructor(private http: Http) { }
apiUrl = 'https://jsonplaceholder.typicode.com/users';
username: string = '';
user: any;
ngOnInit() {
this.http.get(this.apiUrl)
.map(res => res.json())
.mergeMap(users => {
this.username = users[6].username;
return this.http.get(`${this.apiUrl}?username=${this.username}`)
.map(res => res.json())
})
.subscribe(user => this.user = user);
}
}
在上面示例中，我們通過 mergeMap 操作符，解決了嵌套訂閱的問題。最后我們來看一下如何處理多個并行的 Http 請求。
forkJoin
接下來的示例，我們將使用 forkJoin 操作符。如果你熟悉 Promises 的話，該操作符與 Promise.all() 實現(xiàn)的功能類似。forkJoin 操作符接收一個 Observable 對象列表，然后并行地執(zhí)行它們。一旦列表的 Observable 對象都發(fā)出值后，forkJoin 操作符返回的 Observable 對象會發(fā)出新的值，即包含所有 Observable 對象輸出值的列表。具體示例如下：
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/forkJoin';
@Component({
selector: 'app-root',
template: `
<p>Post Detail Info</p>
<ul>
<li>{{post1 | json}}</li>
<li>{{post2 | json}}</li>
</ul>
`
})
export class AppComponent implements OnInit {
constructor(private http: Http) { }
apiUrl = 'https://jsonplaceholder.typicode.com/posts';
post1: any;
post2: any;
ngOnInit() {
let post1 = this.http.get(`${this.apiUrl}/1`);
let post2 = this.http.get(`${this.apiUrl}/2`);
Observable.forkJoin([post1, post2])
.subscribe(results => {
this.post1 = results[0];
this.post2 = results[1];
});
}
}
我有話說
除了 mergeMap 外，RxJS 中的 switchMap 有什么用？
switchMap 操作符用于對源 Observable 對象發(fā)出的值，做映射處理。若有新的 Observable 對象出現(xiàn)，會在新的 Observable 對象發(fā)出新值后，退訂前一個未處理完的 Observable 對象。
使用示例：
var source = Rx.Observable.fromEvent(document.body, 'click');
var example = source.switchMap(e => Rx.Observable.interval(100).take(3));
example.subscribe({
next: (value) => { console.log(value); },
error: (err) => { console.log('Error: ' + err); },
complete: () => { console.log('complete'); }
});
示例 marble 圖：
source : -----------c--c-----------------...
concatMap(c => Rx.Observable.interval(100).take(3))
example: -------------0--0-1-2-----------...
以上代碼運行后，控制臺的輸出結果：
0
0
1
2
而在實際使用 Http 服務的場景中，比如實現(xiàn) AutoComplete 功能，我們可以利用 switchMap 操作符，來取消無用的 Http 請求。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于Angular封裝表單控件及一些思想的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Angular具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-12-12
這篇文章主要介紹了AngularJS自定義表單驗證功能,結合完整實例形式詳細分析了AngularJS實現(xiàn)表單驗證的相關指令、模型綁定、數(shù)據驗證等操作技巧,需要的朋友可以參考下2018-08-08
在項目中遇到這樣的需求想把下拉框的單選改為多選，怎么實現(xiàn)呢？下面小編通過本文給大家分享angularjs單選改為多選的開發(fā)過程及問題解析，需要的朋友參考下2017-02-02
如何使用AngularJs打造權限管理系統(tǒng)【簡易型】
這篇文章主要介紹了使用AngularJs打造權限管理系統(tǒng)【簡易型】的相關資料,需要的朋友可以參考下2016-05-05
Angular.js初始化之ng-app的自動綁定與手動綁定詳解
這篇文章主要給大家介紹了關于Angular.js初始化之ng-app的自動綁定與手動綁定的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。2017-07-07
關于AngularJS中幾種Providers的區(qū)別總結
這篇文章主要給大家介紹了關于AngularJS中幾種Providers的區(qū)別的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用AngularJS具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-05-05
最近Angular項目組終于發(fā)布了新版——正式版 Angular 4.0.0。所以想著就來嘗試下升級，記錄下整個升級過程分享給大家，所以這篇文章主要介紹了Angular2升級到Angular4的詳細步驟，需要的朋友可以參考下。2017-03-03
Angular 4環(huán)境準備與Angular cli創(chuàng)建項目詳解
Angular4.0來了，更小，更快，改動少，所以下面這篇文章主要給大家介紹了關于Angular 4環(huán)境準備與學會使用Angular cli創(chuàng)建項目的相關資料，文中給出了詳細的示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。2017-05-05
這篇文章主要介紹了Angular2進階之如何避免Dom誤區(qū),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了AngularJS模塊學習之Anchor Scroll 的相關資料,需要的朋友可以參考下2016-01-01