如何將http請求可觀察結果映射到新的http observable並返回外部值和內部值？

Question

我想返回一個observable，它返回兩個值（在一個數組或字典中），其中一個值是第一個值的條件http請求。

以從https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs的例子，我想修改如下：

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/mergeMap'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app/app.component.html' 
}) 
export class AppComponent { 
    homeworld: Observable<{}>; 
    constructor(private http: Http) { } 

    ngOnInit() { 
    this.homeworld = this.http.get('/api/people/1') 
     .map(res => res.json()) 
     .mergeMap(character => this.http.get(character.homeworld)) 
    } 
} 

因此，觀察到的將返回兩個家園和字符（！）。

Answer 1

使用可以使用switchMap操作符的resultSelector函數，該函數採用內部和外部可觀察性並將它們組合在一起。

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap

下面是一個例子：

Rx.Observable.of(1) 
    .switchMap(x=>Rx.Observable.of(x+1), (outer, inner) => ({outer, inner})) 
.subscribe(x=>console.log(x)) 

它將打印

{ 
inner: 2, 
outer: 1 
} 

Answer 2

裏面的mergeMap操作符，你可以操縱外觀察到的（源），並與結合起來內部通過一個resultSelector：

const example = Rx.Observable.of('Hello') 
    .mergeMap(v => Rx.Observable.of(v +" Rxjs"),(valueFromSource,valueFromInner)=>{ 
     return `Source: ${valueFromSource}, Inner: ${valueFromInner}`; 
}); 
//output: "Source: Hello, Inner: Hello Rxjs" 
const subscribe = example.subscribe(val => console.log(val)); 

您可以檢查一個活生生的例子here

更多有關mergeMap可以發現here