按钮点击具有角反跳请求

问题描述

我发现一旦单击按钮，就很难使用 Rxjs 对 HTTP 请求实现去抖动。我想要实现的是当按钮被点击时，它应该等待 x 秒，然后发布到服务器。

btnClick() {
    this.loader = true;
    let send = "";
    send = this.checkForm.username.value;
    this.checkService
      .validate(send)
      .pipe(finalize(() => (this.loader = false)))
      .subscribe((response) => {
        console.log(response)
      });
  }

解决方法

我会做一些事情，比如从按钮点击事件处理程序调用一个主题来插入一些去抖动时间，然后 switchMap 后调用

    btnClicked$: Subject <string> = new Subject<string>();

    ngOnInit(): void {
      this.btnClicked$.pipe(
        debounceTime(500),switchMap((send) => this.checkService.validate(send).pipe(
          finalize(() => (this.loader = false)))),take(1)
      ).subscribe()
    }

    btnClick(): void {
      this.btnClicked$.next(this.checkForm.username.value);
    }