RxJS 发出字符串数组，彼此相隔一秒

Question

我有一段代码负责获取 Observable<string[]>，然后将其映射到 Observable<string> 并以 1 秒的间隔发出值。

可以把它想象成网站上的消息代码。

我当前的代码在下面工作：

    const arrayOfStrings$ = of([
        'Warming things up',
        'Getting things ready',
        'Welcome'
    ]);

    this.messages$ = arrayOfStrings$.pipe(
        switchMap((messages) => from(messages).pipe(
            concatMap((innerMessage) => of(innerMessage).pipe(delay(1000))),
        )),
        tap((message) => {
            console.log(`Message: ${message}`);
        })
    );

有没有更好的方法来用更少的代码做到这一点？困扰我的主要是 switchMap() 和 concatMap() 在彼此内部。

感谢您的任何帮助和建议。

编辑：这是我在实际项目中运行的简化版本。我只是想找到一种更简单的方法来从 Observable 到 Observable 并在每次发射后将每次发射延迟一秒

Answer 1

您可以先展平数组，然后使用 concatMap() 延迟每个发射，这将确保消息一个接一个地发射。

const arrayOfStrings$ = of([
  'Warming things up',
  'Getting things ready',
  'Welcome'
]);

arrayOfStrings$
  .pipe(
    concatAll(), // flatten the array into individual next notifications
    concatMap(message => of(message).pipe(
      delay(1000),
    )),
  )
  .subscribe();

Answer 2

of('one', 'two', 'three')
  .pipe(zipWith(interval(1000)))
  .subscribe(console.log)

或者如果你想立即开始替换间隔

timer(0, 1000)

Answer 3

我会使用以下代码：

const arrayOfStrings$ = of([
  'Warming things up',
  'Getting things ready',
  'Welcome'
]);

arrayOfStrings$.pipe(
  mergeMap((a) => a),
  zip(timer(1000, 1000)),
  map(([a]) => a),
  tap(message => {
    console.log(`Message: ${message}`);
  })
);