Question

早上好！目前，我正在尝试使用javascript创建某种简单的验证，但是在使用异步功能时遇到了问题。

下面您将看到UI方法，该方法通过validityChecks集合进行迭代

    checkValidity: function(input){
        for(let i = 0; i<this.validityChecks.length; i++){

            var isInvalid = this.validityChecks[i].isInvalid(input);//promise is returned
            if(isInvalid){
                this.addInvalidity(this.validityChecks[i].invalidityMessage);
            }

            var requirementElement = this.validityChecks[i].element;
            if(requirementElement){
                if(isInvalid){
                    requirementElement.classList.add('invalid');
                    requirementElement.classList.remove('valid');
                }else{
                    requirementElement.classList.remove('invalid');
                    requirementElement.classList.add('valid');
                }
            }
        }
    }

下面是特定的收集对象，该对象无法按预期工作

var usernameValidityChecks = [
    {
        isInvalid: function(input){
            var unwantedSigns = input.value.match(/[^a-zA-Z0-9]/g);
            return unwantedSigns ? true:false;
        },
        invalidityMessage:'Only letters and numbers are allowed',
        element: document.querySelector('.username-registration li:nth-child(2)')
    },
    {
        isInvalid: async function (input){
            return await checkUsername(input.value);
        },
        invalidityMessage: 'This value needs to be unique',
        element: document.querySelector('.username-registration li:nth-child(3)')
    }

]

function checkUsername (username) {
    return new Promise ((resolve, reject) =>{
        $.ajax({
            url: "check.php",
            type: "POST",
            data: { user_name: username },
            success: (data, statusText, jqXHR) => {
                resolve(data);
            },
            error: (jqXHR, textStatus, errorThrown) => {
                reject(errorThrown);
            }
        });
    });
}

问题是在checkValidity方法中向var isInvalid返回了promise。任何人都可以建议如何使价值返回而不是承诺吗？还是在那里处理诺言？先感谢您！
编辑：
原谅我，但这是我第一次参加Stack，可能我的问题有点不准确。集合中的某些对象也是同步，我更改了 usernameValidityChecks 。如何处理这种情况？
我同时拥有async和sync方法的地方吗？

Answer 1

代替下面的行

var isInvalid = this.validityChecks [i] .isInvalid（input）;

您可以使用下面的代码使代码更简洁，并将所需的值存储在变量中，但是以上建议的解决方案也是正确的

var isInvalid =等待this.validityChecks [i] .isInvalid（input）.catch（（err）=> {console.log（err）}）;

此行之后，您将在 isInvalid 变量

上获得所需的值。

并在所有其他 isInvalid 函数定义中添加 async 关键字

Answer 2

使用.then访问承诺的结果：

var isInvalid = this.validityChecks[i].isInvalid(input).then(res => res);

异步js验证表单

2 个答案: