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 对象发出的值，做映射处理。若有新的 Observable 对象出现，会在新的 Observable 对象发出新值后，退订前一个未处理完的 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 服务的场景中，比如实现 AutoComplete 功能，我们可以利用 switchMap 操作符，来取消无用的 Http 请求。