Angular AsyncValidator：值不满足要求时如何阻止HTTP请求

我完全懂你的需求——不想在输入不符合基本要求的时候还白白调用后端接口，对吧？这其实很容易实现，咱们只需要在发起异步请求前加一层前置校验逻辑就行。

先看修改后的完整代码，我会在关键地方给你标注清楚：

import { Injectable } from "@angular/core";
import { AsyncValidator, AbstractControl } from "@angular/forms";
import { Observable } from "rxjs/Rx";
import { UsersService } from "../services/UsersService";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';

@Injectable()
export class UniqueUserNameAsyncValidator implements AsyncValidator {
  constructor(private usersService: UsersService) { }
  
  validate(c: AbstractControl): Promise<any> | Observable<any> {
    return Observable.timer(500).switchMap(() => {
      // 第一步：在这里添加你的「特定要求」判断逻辑
      const userName = c.value?.trim();
      // 举个例子：要求用户名不能为空，且长度至少3位
      if (!userName || userName.length < 3) {
        // 不满足要求时，直接返回验证结果，跳过HTTP请求
        // 如果你想标记为「验证失败」，返回自定义错误对象
        return Observable.of({ userNameInvalid: true });
        // 如果你只是不想发请求，但视为「验证通过」，就返回null
        // return Observable.of(null);
      }

      // 第二步：只有满足要求时，才调用后端服务检查唯一性
      return this.usersService.checkUserNameUnique(userName)
        .map(isUnique => {
          // 服务返回true（用户名唯一）则验证通过，返回null；否则返回错误对象
          return isUnique ? null : { userNameTaken: true };
        });
    });
  }
}

关键逻辑说明： #

• 前置校验拦截：在switchMap里先对输入值做判断，你可以根据实际需求修改条件——比如用户名必须符合正则（只能包含字母/数字/下划线）、不能包含特殊字符、长度在3-20位之间等等。只要不满足条件，就直接返回一个同步的Observable结果，完全不会走到调用usersService的逻辑。
• 灵活返回结果：如果不满足要求时需要提示用户“格式不正确”，就返回{ userNameInvalid: true }；如果只是不想浪费请求，且不提示格式问题（比如把格式校验放在同步验证器里），就返回null表示验证通过。
• 保持原有延迟逻辑：你原来的500ms延迟通过Observable.timer(500)保留了下来，不会影响输入防抖的效果。

另外，如果你更习惯用debounceTime来实现防抖，也可以改成下面这种写法，逻辑是一样的：

validate(c: AbstractControl): Promise<any> | Observable<any> {
  return Observable.of(c.value)
    .debounceTime(500)
    .switchMap(userName => {
      userName = userName?.trim();
      if (!userName || userName.length < 3) {
        return Observable.of({ userNameInvalid: true });
      }
      return this.usersService.checkUserNameUnique(userName)
        .map(isUnique => isUnique ? null : { userNameTaken: true });
    });
}

这样就能完美实现你的需求啦——只有输入符合要求时才会发起HTTP请求检查用户名唯一性，不符合要求时直接拦截，节省不必要的后端调用。

内容的提问来源于stack exchange，提问作者Catalin