javascript - 如何在 Angular 中基于一个 http 调用进行多次验证

Question

我的表单上有一个包含大量验证的字段。

首先，我将其构造为多个指令，每个指令都有自己的错误消息。

但是，验证使用后端异步调用，因此突然对于一个字段，我对同一数据服务进行了 5 个 http 调用。我正在尝试找出如何更有效地编写此内容。

我想知道是否可以有一个调用数据服务的 $async 验证器，以及 之后的第一个异步函数内的多个常规 $validators .然后。我对此进行了实验，但它似乎根本没有到达嵌套的 $validators 。

我还尝试在服务中进行一次调用，但我不知道如何在字段上的 modelValue 更改时更新它，从而将信息传递给相应的验证指令。我可以在服务中将其作为异步验证来执行，并将响应附加到要查找的指令的范围吗？

TLDR；

如何进行一次 http 调用并根据返回的数据执行多个验证检查，每个验证检查都有自己的错误？

例如

我有大约四个指令，它们看起来都像这样:

angular.module('validationForField').directive('po', ['$q', '$sce', '$timeout', 'myService', function ($q, $sce, $timeout, myService) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl, ngModel) {
            ctrl.$asyncValidators.validateField = function (modelValue) {
                var def = $q.defer();
                myService.httpcall(modelValue)
                    .then(function (response, modelValue) {
                        if (response.data.status === "Error") {  
                            return def.reject();
                        }
                     def.resolve();

                    }).catch(function(){
                    def.reject();
                });
                return def.promise;
            }
        }
    }
}]);

每个都对数据进行不同的分析，以返回不同的错误消息。每个人都对 myService.httpcall 进行调用，这最终是多余的，因为它们都获取相同的数据。

我正在努力

angular.module('validationForField').directive('po', ['$q', '$sce', '$timeout', 'myService', function ($q, $sce, $timeout, myService) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl, ngModel) {
            ctrl.$asyncValidators.validateField = function (modelValue) {
                var def = $q.defer();
                myService.httpcall(modelValue)
                    .then(function (response, modelValue) {
                        if (response.data.status === "Error") {  
                            return def.reject();
                        }
                        ctrl.$validators.checkStatus = function (response) {
                             if (response.data.data.status === "10"){
                             return false
                         }
                        ctrl.$validators.checkPermissions = function (response) {
                             return response.data.data.permission){

                         }

                     def.resolve();

                    }).catch(function(){
                    def.reject();
                });
                return def.promise;
            }
        }
    }
}]);

这样就有了关于 http 调用是否成功的主要异步验证器，以及在返回时使用该数据的内部 $validators

Answer 1

我假设后端服务接受一个值(要验证的字段的值)并为所有验证返回单个响应，例如:

// true would mean valid, string would mean invalid with the given error:
{
    businessRuleOne: true,
    businessRuleTwo: "The format is incorrect",
    ...
}

我相信解决方案是在缓存 Promise 的服务中执行 HTTP 调用；异步验证器调用服务并检索它们返回的相同 promise 。一些带有内联解释的示例代码:

// the service:
app.service('myService', function($http, $q) {
    // cache the requests, keyed by the model value
    var requestMap = {};

    this.httpcall = function(modelValue) {
        // if cached, return that (and do not make extra call)
        if( requestMap[modelValue] ) {
            return requestMap[modelValue];
        }
        // if not cahced, make the call...
        var promise = $http.get('....');
        // ...cache it...
        requestMap[modelValue] = promise;
        // ...and remember to remove it from cache when done
        promise.finally(function() {
            delete requestMap[modelValue];
        });
        return promise;
    };
});

现在，异步验证器可以完全按照您发布的方式实现。调用 myService.httpcall(modelValue) 将仅在第一次调用时调用远程服务，其余的将重用缓存的 Promise。

<小时/>

还有两点:(1)这种技术称为记忆化。它由许多库实现，例如lodash ，您也许可以使用它们来保持 myservice.httpcall() 干净。 (2) 您不需要异步验证器的额外 promise ，例如:

angular.module('validationForField').directive('po', ['$q', '$sce', '$timeout', 'myService', function ($q, $sce, $timeout, myService) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl, ngModel) {
            ctrl.$asyncValidators.validateField = function (modelValue) {
                return myService.httpcall(modelValue)
                    .then(function (response) {
                        if (response.data.status === "Error") {  
                            return $q.reject();
                        }
                        return response;
                    });
            }
        }
    }
}]);