angular.js4使用 RxJS 处理多个 Http 请求

有时候进入某个页面时，我们需要从多个 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;      });   }); }}