如何将http请求可观察结果映射到新的http可观察结果并返回外部和内部值？答案

【问题标题】：How to map http request observable result to new http observable and return both outer and inner values?如何将http请求可观察结果映射到新的http可观察结果并返回外部和内部值？
【发布时间】：2017-08-03 14:25:02
【问题描述】：

我想返回一个 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))
  }
}

所以 observable 将返回 homeworld 和（！）角色。

【问题讨论】：

条件是什么？
家庭世界值取决于获取的字符值

标签： rxjs observable angular-http

【解决方案1】：

使用可以使用switchMap操作符的resultSelector函数，它接受内部和外部observable并将它们组合在一起。

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
}

【讨论】：

【解决方案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

【讨论】：