angular - 反跳异步验证器

Question

我有一个工作的异步验证器，它向服务器发出 HTTP 请求以检查用户名是否已被占用。因为我不想在每次击键后调用 API，所以我需要对输入流进行去抖动。

我第一次在服务中使用 throttleTime，但是关于 SO 的另一个主题说这必须在订阅者身上，但还没有运气!

我的组件:

this.form = this._fb.group(
      {
        username: ['', [Validators.required, Validators.maxLength(50), NoWhitespaceValidator], [IsUserIdFreeValidator.createValidator(this._managementService)]]
      });

我的验证器:

export class IsUserIdFreeValidator {
  static createValidator(_managementService: ManagementService) {
    return (control: AbstractControl) => {
      return _managementService.isUserIdFree(control.value)
        .pipe(
          throttleTime(5000),
          (map(
            (result: boolean) => result === false ? { isUserIdFree: true } : null))
        );
    };
  }
}

我的服务:

  public isUserIdFree(userId: string): Observable<{} | boolean | HttpError> {
    const updateUserCheck: UpdateUserCheck = new UpdateUserCheck();
    updateUserCheck.userID = userId;

    return this._httpClient.post<boolean>('UserManagementUser/IsUserIdFree', updateUserCheck));
  }

Answer 1

这应该可以解决问题:

  static createValidator(_managementService: ManagementService) {
    const subject = new BehaviorSubject('');
    const observable = subject.asObservable().pipe(
        debounceTime(1000),
        switchMap(val => _managementService.isUserIdFree(val)),
        map((isUserIdFree: boolean) => isUserIdFree ?  null : { userIdTaken : true }),
        ); 
    return (control: AbstractControl) => {
      subject.next(control.value);
      return observable.pipe(takeUntil(timer(5000))); // acts as a way to make observable finite
    }
  }

去抖动应该发生在控件发出的值上，而不是从 http 服务返回的结果上。我们首先在可观察流上发出值，并通过 distinctUntilChanged 将其通过管道传输，这确保只有与上次发出的值相比不同的值才能通过管道的那个阶段。 debounceTime(x) 确保仅在“x”毫秒数后发出最后一个值。

switchMap 运算符获取控制值并向后端发出获取请求，并将新的可观察对象传递到管道的下一阶段。最后，我已将您现有的 map 运算符应用于后端的结果，以生成相应的错误消息。