Vuelidate 异步验证结果到循环

Posted 2023-02-16

【中文标题】Vuelidate 异步验证结果到循环

【英文标题】：Vuevalidate async validation results to a loop

【发布时间】：2019-01-25 21:53:40

【问题描述】：

我正在使用Vue Validate

我的 vuevlidate 中有以下内容

      validations: 
        user_form: 
            email: required,email, isUnique(value) 
                    // standalone validator ideally should not assume a field is required
                    if (value === '') return true;
                    // simulate async call, fail for all logins with even length
                    return new Promise((resolve, reject) => 
                       this.$http.post("v1/user-management/users/email-registeredi",email:value).then((res)=>
                            console.log("res is ", res);
                            resolve(true);
                        ,(err)=>
                            reject(false)
                        )
                    )
                ,
            role: required,
            password: required
        
    ,

上面创建了一个无限循环的http请求，尤其是当它出错时

我哪里错了

【问题讨论】：

http 请求的无限循环意味着isUnique 函数被无限调用。我无法用这个demo 重现它。您可以编辑演示以重现该问题吗？

【参考方案1】：

你不需要使用“new Promise”，因为 vue-resource 已经这样做了。试试这个：

validations: 
    user_form: 
        email: required,email, isUnique(value) 
                // standalone validator ideally should not assume a field is required
                if (value === '') return true;
                // simulate async call, fail for all logins with even length

               return this.$http.post("v1/user-management/users/email-registeredi",email:value).then((res)=>
                    console.log("res is ", res);
                    return true;
                ,(err)=>
                    return false;
                );
            ,
        role: required,
        password: required
    
,

【参考方案2】：

如果 vue validate 没有很好地处理拒绝承诺并创建无限循环。 您可以尝试，async await 用于 Vue 验证的 isUnique，try 和 catch 在错误时返回 false， 像这样的。

validations: 
 user_form: 
  email: 
    required,
    email,
    async isUnique (value) 
        if (value === '') return true
        try
          const response = await this.$http.post("v1/user-management/users/email-registeredi",email:value)
          return true;
        
        catch(e)
          return false;