RxJS Observable - 在使用下一个发射值之前等待异步方法完成

Question

我正在对 observalbe 发出的每个值应用异步方法。 我希望仅在异步方法为前一个值完成后才将此异步方法应用于下一个发出的值。

这是一个简短的例子：

import { of } from "rxjs";

const timeout = (ms) => {
    return new Promise(resolve => setTimeout(resolve, ms));
};

of(1, 2, 3).subscribe(async (val) => {
  console.log(`starting to use ${val}`);
  await timeout(1000);
  console.log(`done using  ${val}`);
});

timeout 正在更新我的 state 并从服务器获取数据
Output：

// starting to use 1
// starting to use 2
// starting to use 3
(wait 1 sec)
// done using 1
// done using 2
// done using 3

我会撒谎得到的是：

// starting to use 1
(wait 1 sec)
// done using 1
// starting to use 2
(wait 1 sec)
// done using 2
// starting to use 3
(wait 1 sec)
// done using 3

Answer 1

您可以简单地使用concatMap ：

of(1, 2, 3).pipe(
   concatMap(val => timeout(1000))
);

concatMap将接收 3 个发出的值，并一次对它们“工作”，等待每个 promise 的结果，然后再继续下一个。

这是一个有效的StackBlitz演示。

Answer 2

在超时调用之前添加await ，如下所示： await timeout(1000)这至少会将您的代码以正确的顺序放入async ()=>{}中。 然而，function 在 observable 中发生新事件时启动。 这使您可以在开头看到三个启动日志。

如果您希望您的 observable 每秒发出一个值，您可以考虑使用interval或一些去抖动机制而不是of()

Answer 3

您可以使用from将 promise 转换为 Observable。 这样你就可以完全控制你的 observables，并且你可以使用 rxjs 提供的所有好东西（所有其他方法和运算符，如 pipe、switchMap 等）。

import { of, from } from 'rxjs';

of(1, 2, 3)
    .pipe(
        switchMap((val) => {
            console.log(`starting to use ${val}`);
            return from(timeout(1000))
        })
    )
    .subscribe(finalValue => {
        console.log(`done using  ${val}`);
    })

来自文档（没有双关语）：

从一个数组创建一个 Observable，一个类似数组的 object，一个 Promise，一个可迭代的 object，或者一个类似 Observable 的 objectA8CFDE891111