RxJS：HTTP 请求的顺序

Question

我有多个 REST 请求要做。请求应该按照声明的顺序发生 - 一个在另一个结束之后。

最后我需要做一个动作。

我怎样才能得到它？我认为必须有比级联请求更好的方法。 但我在 RxJS 和异步编程方面做得很差。

this.http.get <any> ("/a").subscribe ((resp) => { foo ();  
     this.http.get <any> ("/b").subscribe ((resp) => { bar ();
          this.http.get <any> ("/c").subscribe ((resp) => { baz (); }}}
);

// action now

Answer 1

在这种情况下我会使用concatMap。

代码看起来像这样

this.http.get <any> ("/a").pipe(
  concatMap(respA => {
    foo();
    return this.http.get <any> ("/b");
  }),
  concatMap(respB => {
    bar();
    return this.http.get <any> ("/c");
  })
).subscribe(
  respC => { 
    baz(); 
  }
);

concatMap 确保调用按顺序执行。

您可能会在常见的 http 相关用例中找到有关如何使用 rxJs 的灵感in this article.

Answer 2

为此使用forkJoin

import { forkJoin } from 'rxjs';

并像这样使用它

forkJoin([this.http.get("/a"), this.http.get("/b"), this.http.get("/c")]).subscribe(([respA, respB, respC]) => {});

forkJoin 函数的输入必须是一个 observables 数组。

编辑：

从@Picci 阅读公平点后，我建议使用concat 运算符。您可以将副作用放入每个 observable 的 tap 运算符中，并且仍然将一组 observables 传递给 concat，这将保持顺序。

const a$ = this.http.get("/a").pipe(tap(() => foo()));
const b$ = this.http.get("/b").pipe(tap(() => bar()));
const c$ = this.http.get("/c").pipe(tap(() => baz()));

concat([a$, b$, c$]).subscribe(([respA, respB, respC]) => {});

// if you want to handle http errors, you can do it like this

const a$ = this.http.get("/a").pipe(
  tap(() => foo()),
  catchError((err) => {
    handleErr(err);
    return of(EMPTY);
  })
);