使用 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

任何幫助表示贊賞。

編輯：運行以下代碼段時，永遠不會調用第二個控制台日志

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)))
);