angular - 如何在服务请求上使用 switchmap？

Question

我有一个表单，其中有一个按钮，可以使用表单的内容发送电子邮件。我想使用 switchmap，因为我想防止用户垃圾点击并创建大量 HTTP 请求，但我不知道该怎么做。

使用 switchmap 之前:

this.customService.sendEmail(this.emailContents).subscribe(
    data => { console.log("Success") }
)

尝试使用 switchmap:

this.customService.sendEmail(this.emailContents).pipe(
    switchMap(() => this.customService.sendEmail(this.emailContents))
)
.subscribe(
    data => { console.log("Success") }
)

但现在，点击按钮 3 次时，它会发送 12 封电子邮件，而不是发送 1 封电子邮件。我认为我在错误的地方使用了它，但我并没有真正明白应该如何使用它......

Answer 1

在您的代码中:

this.customService.sendEmail(this.emailContents).pipe(
    switchMap(() => this.customService.sendEmail(this.emailContents))
)
.subscribe(
    data => { console.log("Success") }
)

您正在多次调用 sendEmail ...无论是作为外部 Observable 还是在 switchMap 内。

要使用 switchMap，您需要有一个源流……也许是一个与按钮单击事件相关的操作流。然后，您在 switchMap 中调用 sendEmail，如您所示。

您可以这样想... switchMap 需要位于您想要使用react的操作上...这将是单击。而switchMap内部就是你想要执行你想要限制的操作的地方。

(尽管正如其他人所说，在这种情况下 switchMap 可能不是您的最佳选择，因为它仍然可以处理多个按钮单击，具体取决于操作的速度以及用户持续单击的时间。)

例如:

  clickSubject = new Subject<number>();
  clickAction$ = this.clickSubject.asObservable();

  performAction$ = this.clickAction$.pipe(
    switchMap(item => this.doSomething())
  );

  onClick() {
    this.clickSubject.next();
  }

  doSomething() {
    return interval(500);
  }

更好的选择可能是 debounceTime:

  performAction$ = this.clickAction$.pipe(
    debounceTime(250),
    switchMap(item => this.doSomething())
  );

在此处查看更完整的示例:https://stackblitz.com/edit/angular-subject-order-deborahk