Angular 和 RxJs：处理验证码过期答案

【问题标题】：Angular and RxJs: handling expiration of verification codeAngular 和 RxJs：处理验证码过期
【发布时间】：2021-02-23 08:02:56
【问题描述】：

我有一个简单的组件来验证用户的电子邮件。它由“发送电子邮件”（发送带有代码的电子邮件）按钮、用于输入发送代码的文本输入和“验证”按钮组成，该按钮将代码发送回以进行验证。验证码在 5 分钟后过期。如果我重新发送电子邮件，新代码将在重新发送后 5 分钟内过期。

我正在使用OnPush 更改检测策略，所以一切都使用异步管道处理。可观察的包装“发送电子邮件”请求作为异步管道传递给模板。我想要另一个可观察到的东西，它会在 5 分钟过去时发出一些东西（例如true）。是的，我可以像下面这样使用delay 运算符

expired$ = sendObservable$.pipe(delay(5 * 60 * 1000), mapTo(true))

但是。如果用户决定重新发送电子邮件怎么办？如何从头开始这 5 分钟重新开始？

是的，我知道所有这些都有些奇怪。也许有完全不同的方式来使用 observables 和异步管道来处理代码过期？

【问题讨论】：

标签： javascript angular rxjs

【解决方案1】：

debounceTime 会延迟源 Observable 发出的值，但会下降如果新值到达，则先前未决的延迟排放源可观察。该运算符跟踪最新值来自源 Observable，并且仅在 dueTime 足够时发出时间过去了，源上没有出现任何其他值可观察的。如果在 dueTime 静音发生之前出现新值，则先前的值将被丢弃，并且不会在输出中发出

所以，简单地说：

expired$ = sendObservable$.pipe(debounceTime(5 * 60 * 1000))

【讨论】：