在 Angular 6 中链接 HttpClient 调用

Question

我想我已经阅读了 100 多篇关于该主题的帖子，但我仍然无法弄清楚如何在 Angular 6 中使用 rxjs 链接两个 HttpClient 调用。

假设我有一个带有该签名的服务：

  GeoService {
      getState(): Observable<string> {
          return this.http.get<string>(stateURL);
      }
      getCities(state: string): Observable<string[]> {
          return this.http.get<string[]>(citiesURL + state);
      }
   }

我一辈子都不知道如何在我的组件中获取状态和相应的城市列表：

import { Observable } from 'rxjs';
import { map, flatMap, mergeMap, filter, switchMap } from 'rxjs/operators';

...

 ngOnInit() {

      this.svc.getState().
        pipe(map((state) => {
            this.state = state;
            return this.svc.getCities(state);
          }),
          mergeMap((cities) => this.cities = cities))
        ).
        subscribe(console.log('done'));

上面的代码是我 20 次以我能想到的各种方式组合 pipe/map/mergeMap/subscribe 的随机尝试之一......非常感谢一个工作示例：)

谢谢！

编辑：“可能重复”的帖子均不包含有效的实际示例

Answer 1

你可以这样做

this.svc.getState().pipe(
     tap(state=>this.state=state),
     switchMap(this.svc.getCities))
.subscribe(cities=>{
    //got the cities
})

map 操作符是用来转换发射值的，但是 tap 操作符是用来做一些事情而不修改 observable 的发射值。

注意 switchMap(this.svc.getCities) 等价于 switchMap(state=>this.svc.getCities(state)

Answer 2

第 21 次尝试是正确的 ;-)

this.svc.getState().
    pipe(mergeMap((state) => {
        this.state = state;
        return this.svc.getCities(state);
    }),
    tap((cities) => this.cities = cities)))
.subscribe(() => console.log('done'));

链式 Observable 进入 mergeMap。你可以把它想象成：

首先，将传入的通知映射到 Observable，然后合并生成的“内部”Observable 到“外部”Observable

此外，如果您打算更改外部状态，请使用 tap 而不是 map。

Answer 3

你快到了：

    this.svc.getState().
        pipe(
            mergeMap((state) => {
                return this.svc.getCities(state).pipe(map(cities => {
                    return { state: state, cities: cities }
                }));
            }),
        ).subscribe(stateAndCities => console.log(stateAndCities));

我建议你阅读这篇文章：

https://blog.strongbrew.io/rxjs-best-practices-in-angular/#using-pure-functions

它还解释了为什么您不应该在 rxjs 运算符中与全局变量进行交互。