RxJS 中的 repeat 和 repeatWhen 操作符

在 RxJS 中，repeat 和 repeatWhen 操作符可以用来重复执行 Observable，这在许多场景下都是非常有用的。

repeat 操作符

repeat 操作符的作用是将原始的 Observable 无限重复执行，直到外部 subscription 被手动取消。

以下是一个简单的示例，其中原始 Observable 在发出完毕后，被重复执行了 3 次：

// javascriptcn.com code example
const { of } = require('rxjs');
const { repeat } = require('rxjs/operators');

const source$ = of(1, 2, 3);

source$.pipe(repeat(3)).subscribe({
  next: val => console.log(val),
  complete: () => console.log('completed'),
});

输出结果：

// javascriptcn.com code example
1
2
3
1
2
3
1
2
3
completed

在示例中，repeat(3) 操作符将原始的 Observable 重复执行了 3 次。

repeatWhen 操作符

repeatWhen 操作符的作用是根据一个条件，决定是否重新订阅原始的 Observable。

以下是一个示例，其中 repeatWhen 操作符将在 5 秒后重复订阅原始 Observable：

// javascriptcn.com code example
const { interval } = require('rxjs');
const { repeatWhen, delay } = require('rxjs/operators');

const source$ = interval(1000);

source$
  .pipe(
    repeatWhen(notifications$ =>
      notifications$.pipe(delay(5000))
    ),
  )
  .subscribe({
    next: val => console.log(val),
    complete: () => console.log('completed'),
  });

输出结果：

// javascriptcn.com code example
0
1
2
3
4
completed
0
1
2
3
4
completed
0
1
2
3
4
completed
...

在示例中，repeatWhen(notifications$ => notifications$.pipe(delay(5000))) 操作符将在 5 秒后重新订阅原始的 Observable。

指导意义

RxJS 中的 repeat 和 repeatWhen 操作符是非常有用的，它们可以帮助我们在需要时重复执行某个 Observable，从而节省时间和精力。

但是，在使用这些操作符时，我们需要注意避免产生无限循环的情况，从而导致性能和内存问题。

因此，在使用 repeat 和 repeatWhen 操作符时，我们应该仔细权衡和考虑各种场景，并在代码中添加必要的保护逻辑，以确保程序的正确性和可靠性。

结论

在本文中，我们介绍了 RxJS 中的 repeat 和 repeatWhen 操作符，分别可以用来无限重复执行 Observable 或根据条件重复订阅 Observable。

这些操作符可以在许多场景下为我们节省时间和精力，但在使用时需要注意避免产生无限循环的情况，从而导致性能和内存问题。

在实际开发中，我们应该结合具体的业务场景和需求，选择合适的操作符，并在代码中添加必要的保护逻辑，以确保程序的正确性和可靠性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6733d72f0bc820c58244af0d