Angular RxJS：使订阅者回调按顺序运行答案

【问题标题】：Angular RxJS: Make subscriber callbacks run in orderAngular RxJS：使订阅者回调按顺序运行
【发布时间】：2019-10-05 04:05:10
【问题描述】：

问题：我必须从服务器获取配置和数据。只有在获取并加载配置后才能呈现数据。

我希望我的问题如何解决：我想同时获取两者，使用 Angular 的HttpClient。但是，必须先执行配置的回调。

尝试1：我从这个SO question尝试了concat()：

concat(
    this.fetchConfig().pipe(take(1)),
    this.fetchData().pipe(take(1))
).subscribe(val => {
    if (isConfig(val)) {
        // This must be executed before the below populate(val);
        // This one is slow, blocking, so it must be executed
        // as soon as possible.
        load(val);
    } else {
        // val is data
        populate(val);
    }
});

但是，我认为它无法实现我的目标。我认为 Observable 是一个惰性执行器，它只有在有 subscribe() 的情况下才会执行。 concat() 延迟订阅fetchData() 的回调，这也延迟了从服务器实际获取数据。

尝试 2：使用forkJoin()：forkJoin() 仅在所有 Observable 发射后发射。配置的获取通常比较快，所以我想尽快执行它的回调，所以当数据准备好时，配置可能已经完全加载了。

我怎样才能做到这一点？而且，顺便说一句，我怎样才能修复我的回调？有一些代码来确定val是数据还是配置非常丑陋。

编辑：我编辑代码以获得更多说明。基本上，我过度设计了它。 forkJoin() 对我来说应该没问题，因为 load(val) 非常快。但是，我仍然想通过强制load(val) 变慢来推动这一点（这实际上是我今天早上的想法），所以它必须尽快执行并且在populate(val) 之前执行。

现在我正在考虑用它制作一个 Observable 并进行链接。

【问题讨论】：

查看stackoverflow.com/questions/45945846/… 的答案。您将需要使用 rxjs 中的 switchMap
how to make 2 dependent http request in Angular 2的可能重复
如果第二个请求需要第一个请求的结果，您只需要 switchMap ，否则您在开始第二个请求之前不必要地等待第一个请求完成。使用 combine latest 你可以同时触发两个请求
load(val) 是做什么的？是 http 请求还是什么？`
@AJT82 它会加载我的配置：v 有一些计算，但速度很快。昨天我认为它必须很慢。

标签： angular asynchronous rxjs

【解决方案1】：

Combine latest 将在两个请求完成后发出

combineLatest(
    this.getJConfig(),
    this.fetchData()
).subscribe(([config, data]) => {
  // Use config
  // Then use data
});

不需要对 http 请求进行 take one，因为一旦请求完成，observable 就会完成。

无需担心一旦完成就使用 config，因为 JavaScript 处理响应所需的时间与完成请求所需的时间相比是微不足道的。

如果你真的想维护秩序，我前段时间为别人想出了这个令人费解的野兽RxJS: MergeMap with Preserving Input order

【讨论】：

是的，我想保持秩序。如果fetchData()先完成，则无需任何配置即可加载数据。

【解决方案2】：

也许 RxJS 并不完美，但你可以做到……

const configFetch = this.fetchConfig().toPromise();
const dataFetch = this.fetchData().toPromise();
const config = await configFetch;
processConfig(config);
const data = await dataFetch;
processData(data);

【讨论】：