有時候進入某個頁面時，我們需要從多個 API 地址獲取數據然后進行顯示。管理多個異步數據請求會比較困難，但我們可以借助 Angular Http 服務和 RxJS 庫提供的功能來實現上述的功能。處理多個請求有多種方式，使用串行或并行的方式。

基礎知識

mergeMap

mergeMap 操作符用于從內部的 Observable 對象中獲取值，然后返回給父級流對象。

合并 Observable 對象

const source = Rx.Observable.of('Hello');//map to inner observable and flattenconst example = source.mergeMap(val => Rx.Observable.of(`${val} World!`));const subscribe = example.subscribe(val => console.log(val)); //output: 'Hello World!'

在上面示例中包含兩種 Observable 類型：

僅當內部的 Observable 對象發出值后，才會合并源 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() 方法來獲取數據。這個例子很簡單，它只處理一個請求，接下來我們來看一下如何處理兩個請求。

Map 和 Subscribe

有些時候，當我們發送下一個請求時，需要依賴于上一個請求的數據。即我們在需要在上一個請求的回調函數中獲取相應數據，然后在發起另一個 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;      });   }); }}