javascript - 如何在解析前取消/忽略 AngularJS 异步验证检查？

Question

我有一个简单的 HTML5 用户注册表。使用添加到 $asyncValidators 的自定义函数验证用户名 input 的值以确保没有用户具有相同的用户名。

考虑以下情况:

1. 用户开始输入用户名(例如“我”)。
2. 稍微延迟后，Angular 验证器开始运行，向服务器发送异步请求，询问用户名是否可用。
3. 用户开始输入更多字符(例如“Me123”)。
4. 在又一次轻微的延迟之后，Angular 再次尝试通过向服务器发送另一个请求来验证用户名。

当 Angular 收到两个关于用户名有效性的响应时，它会做什么？有没有办法优雅地处理这个问题？

我想做的是以某种方式取消或告诉 Angular 在用户修改用户名值后立即忽略第一次验证尝试的结果。

---

2015 年 11 月 12 日编辑:

sirrocco's answer帮助我澄清了我的问题。这里有两部分:

1. 中止实际的 HTTP 请求
2. 告诉 Angular 验证过程停止等待从 $asyncValidators.usernameAvailable 返回的 promise 被解析或拒绝

我可以通过使用 $http 服务的 timeout 选项来做第一个。我的问题是:是否有必要、可取或可能进行第二种？如果是，怎么办？

我认为这可能发生在添加到指令 link 中的元素的 keyup 事件处理程序中。见下文:

index.html

<input 
  ng-model="user.username" 
  ng-model-options="{ debounce: 250 }" 
  check-availability />

checkAvailability.directive.js

function affectsText(keyCode) {
  // some code to determine if keyCode could change value of a text input
}

angular
  .module('app')
  .directive('checkAvailability', ['$q', 'users', function($q, users) {
    return {
      restrict: 'AC',
      require: 'ngModel',
      link: function (scope, element, attrs, ctrl) {
        element.on('keyup', function(e) {
          if (!affectsText(e.keyCode)) {
            return;
          }

          // cancel previous $asyncValidators.usernameAvailable process??

          // users service cancels operation by rejecting a promise previously assigned to to $http's timeout option
          users.cancelIsAvailableCheck();
        });

        ctrl.$asyncValidators.usernameAvailable = function(modelValue) {
          if (ctrl.$isEmpty(modelValue)) {
            return $q.when();
          }

          var deferred = $q.defer();

          users.isAvailable(modelValue).then(function(available) {
            if (available) {
              deferred.resolve();
            } else {
              deferred.reject();
            }
          });

          return deferred.promise;
        }
      }
    };
  }]);

Answer 1

最简单的方法就是禁用用户输入，例如:

<input 
  name="username"
  ng-model="user.username" 
  ng-model-options="{ updateOn: 'blur' }"
  ng-disabled="myForm.$pending"
  check-availability />

因此，一旦用户跳出用户名字段，就会触发验证并禁用该字段(您也可以禁用提交按钮)。

如果这不是可接受的用户体验，您可以改为使用此处描述的方法:http://www.bennadel.com/blog/2616-aborting-ajax-requests-using-http-and-angularjs.htm

本质上，$http 允许在其 timeout 属性上设置 promise 。如果您随后 resolve 该属性，则 http 调用将中止。可能需要反复试验才能找出验证器中的最佳方法。