Question

是否存在rxjs函数或其他方法（希望存在的函数在其中）：

    let testOb$ = of(4).pipe(
      <???>(input => of(input + 2)),
      <???>(input => of(input - 3))
    )
    testOb$.subscribe(x => console.log(x))

    // logs 4, then 6, then 3
    // switchMap and mergeMap just returns 3

请注意，这些值应该一个接一个地出现，而不是一次完成所有操作，然后分别记录这三个值。

用例：

我想加载一些麻烦的data，其中包含对象数组。

每个对象的单个值太大，如果将它们全部加载在一起，则会导致严重的滞后。但是，只要先加载一个，就不会出现UI延迟。

所以我想：

data$ = this._store.dispatch(fetchInitial())
    .pipe(
        <???>(data => fillInitial(data))
        <???>(data => fillRemainder(data))
    )
data$.subscribe(data => renderInput(data))

这是有效的方法吗？

如果没有，那么在rxjs中使用这种用例的最佳实践是什么？

Answer 1

可以通过以下方式获得所需的输出：

let testOb$ = of(4).pipe(
  mergeMap(input => from([input, input + 2])),
  mergeMap(input => from([input, input - 3])),
  filter((val, index) => index != 1)
);
testOb$.subscribe(x => console.log(x))

这看起来很奇怪，因为您想要的输出并没有真正遵循简单的规则。但这有效。

https://stackblitz.com/edit/rxjs-cmxgan?devtoolsheight=60

现在，对于您的第二个示例，我们将执行以下操作以避免延迟：

data$ = this._store.dispatch(fetchInitial())
  .pipe(
    mergeMap(data => fillInitial(data).pipe(startWith(data)))
    mergeMap(data => fillRemainder(data).pipe(startWith(data))),
    filter((val, index) => index != 1)
)

Answer 2

创建3个独立的流，并在需要时合并。

   let testOb$ = of(4).pipe(share());

   const six$ = testOb$.pipe(mergeMap(input => of(input + 2)));
   const three$ = testOb$.pipe(mergeMap((input => of(input - 3)));

   merge(testOb$, six$, three$).subscribe(x => console.log(x))

如何一个接一个地具有可观察的返回值

2 个答案: