使用 RXJS Observables 发送顺序 Http 请求

Question

我想要一个函数，它向端点发送一个 http 请求，给出所有项目的列表，然后发送第二个请求以获取该列表中的第一个元素。该函数应返回最后一项。我正在使用以下代码，但第二个 http 请求不起作用。

getFirstItem(): Observable<any> {
  return this.getList().pipe(concatMap(value => this.getItem(value[0].id)));
}

使用 Angular 7 和 rxjs 6.4.0

感谢任何帮助。

编辑： 运行以下 sn-p 时，永远不会调用第二个控制台日志

getFirstItem(): Observable<any> {
  return this.getList().pipe(
    tap(x => console.log(x)),
    concatMap(value => this.getItem(value[0].id)),
    tap(x => console.log(x)) // never called
}

Answer 1

您的代码看起来不错。我只是想知道this.getItem是如何实现的。

无论如何，这是一个使用 concatMap 的工作示例： https://stackblitz.com/edit/rxjs-api-call-jvqj5q?file=src/app/app.component.ts

您可以使用mergeMap、concatMap、switchMap。所有这些都将起作用。它们只是在外部 observable 发出 (this.getList) 时如何处理内部 Observable (this.getItem) 的行为不同。

更多信息在这里：https://morioh.com/p/fcfea9850b90

Answer 2

您可以使用mergeMap

var result = this.getList().pipe(
  mergeMap(value =>  this.getItem(value[0].id)))
);