Question

我想返回一个observable，它返回两个值（在数组或dict中），其中一个值是第一个值的条件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和（！）角色。

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 observable并返回外部和内部值？

2 个答案: