如何将 http 请求可观察结果映射到新的 http 可观察结果和 return 外部值和内部值？

Question

我想 returns 一个可观察到 return 两个值（在数组或字典中），其中一个值是第一个的条件 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 将 return 家庭世界和（！）角色。

Answer 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
}

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

如何将 http 请求可观察结果映射到新的 http 可观察结果和 return 外部值和内部值？

How to map http request observable result to new http observable and return both outer and inner values?

observable

rxjs

angular-http