时间戳

首页 > 解决方案 > 您如何执行 Observables API 调用数组，其中每个 API 调用都等待前一个？

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

问题描述

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

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

标签： rxjsobservable

解决方案

这里的问题是你使用了combineLatest操作符，它只会在所有的 observables 都发出后才会发出值（例如它同时调用所有东西）。

在那之后concatAll不能影响他们，arrayOfApiObservables因为他们已经被叫了。

正确的方法是创建一个高阶 observable（发出 observables 的 observable），这可以在 operator 的帮助下实现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>

推荐阅读