如何在 Angular / RxJS 中链接服务器调用？

Question

我正在尝试组织我的代码，以便对服务器的一次调用发生在另一次调用之后。 我相信这是一个非常普遍的问题，但我仍在努力理解其他答案并将它们应用于我的具体情况。

我的组件需要 go 按此顺序执行 3 个步骤：load、restoreState 和 fetchData。

这是我的代码：

  private load() {
    this.httpClient.get(this.endpoint1).subscribe(res => {
      this.pageTitle = res.pageTitle;
      this.pageInfo = res.pageInfo;
    })
  }

  private restoreState() {
    // restore state of page (no server calls needed)
    this.filters = this.processFilters(sessionStorage.getItem(this.pageTitle));
  }

  private fetchData() {
    this.httpClient.get(this.endpoint2, this.filters).subscribe(res => {
      this.populatePage(res);
    })
  }

我在想 ngOnInit() 应该看起来像这样：

  ngOnInit(): void {
    this.load().subscribe(() => {
      this.restoreState();
      this.fetchData();
    })
  }

但是，我不太确定如何让它工作。 根据我的研究，我认为它可能与 mergeMap() 或 concatMap() 有关，但我不确定如何让它工作。

Answer 1

使用switchMap

private load(endpoint) {
    return this.httpClient.get(endpoint);
}

private restoreState(pageTitle) {
    // restore state of page (no server calls needed)
    return this.processFilters(sessionStorage.getItem(pageTitle));
}

private fetchData(endpoint, filter) {
    return this.httpClient.get(endpoint, filter);
}

ngOnInit(): void {
    this.load(this.endpoint1).pipe(
        tap(({ pageTitle }) => this.pageTitle = pageTitle),
        tap(({ pageInfo }) => this.pageInfo = pageInfo),
        map(({ pageTitle }) => this.restoreState(pageTitle)),
        tap(( filters ) => this.filters = filters),
        switchMap(( filters ) => this.fetchData(this.endpoint2, filter))
    ).subscribe( res => this.populatePage(res));
}