您如何执行 Observables API 调用数组，其中每个 API 调用都等待前一个调用？答案

【问题标题】：How can you execute and array of Observables API calls where each API calls waits for the previous?您如何执行 Observables API 调用数组，其中每个 API 调用都等待前一个调用？
【发布时间】：2020-11-19 17:18:05
【问题描述】：

我一直在玩的是使用 combineLatest 和 concatAll() 但它们仍然被同时调用。我可以循环并调用每个，但我总是想知道在 RXJS 工作流程中是否有更好的方法。

combineLatest(arrayOfApiObservables).pipe(concatAll()).subscribe();

【问题讨论】：

根据文档，concatAll() 一次执行每个 Observable：rxjs.dev/api/operators/concatAll。但这里的 combineLatest 已经订阅了每个 Observables。
我想你在找concat(...arrayOfApiObservables)
是的，我尝试了上面提到的concat 方法，它似乎提供了您描述的功能。

标签： rxjs observable

【解决方案1】：

这里的问题是您使用了combineLatest 运算符，它只会在所有可观察对象都发出后才会发出值（例如，它同时调用所有内容）。

之后concatAll 不能影响arrayOfApiObservables，因为它们已经被调用了。

正确的做法是创建一个更高阶的可观察对象（发出可观察对象的可观察对象），这可以在运算符from 的帮助下实现，之后您可以通过concatAll 它们来实现所需的结果。

concatAll 文档中的定义：Converts a higher-order Observable into a first-order Observable by concatenating the inner Observables in order.。

let {
  interval,
  from
} = rxjs
let {
  take,
  concatAll,
  mapTo
} = rxjs.operators

let ref = document.querySelector('#container')

const obs1$ = interval(1000).pipe(take(1), mapTo('obs1'));
const obs2$ = interval(500).pipe(take(1), mapTo('obs2'));
const obs3$ = interval(2000).pipe(take(1), mapTo('obs3'));

let allObservables$ = from([obs1$, obs2$, obs3$])

allObservables$.pipe(
  concatAll()

).subscribe((x) => {
      console.log(x)
      container.innerHTML += `<div>${x}</div>`
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>

<div id="container"></div>

【讨论】：

【解决方案2】：

如果您希望它们以顺序方式执行，您可以在 pipe() 中使用 concatMap()。像这样的东西： (1) 。管道（ concatMap(结果 => { 控制台.log（结果）； (2) 的返回； }), concatMap(结果 => { 控制台.log（结果）； (3) 的返回； }), concatMap(结果 => { 控制台.log（结果）； (4) 的返回； }), concatMap(结果 => { 控制台.log（结果）； (5) 的回报； }), concatMap(结果 => { 控制台.log（结果）； (6) 的回报； }) ) .subscribe(res => { console.log("完成"); });

但是，如果你想一次执行它们，然后等待它们直到它们全部完成，那么只需使用 forkJoin()。

【讨论】：