ElementUI-Plus使用validate自定义校验规则异步问题(axios)采坑记录

需求很简单,在注册时检测用户名是否已经注册,在input框下边进行校验
在这里插入图片描述

代码结构:

 let validateUser1 = async (rule, value, callback) => {
                if (value === '') {
                     return callback(new Error('请输入用户名'))
                } else {
                    if (value) {
                      request({url:'/user/judgeName', methods:'get', params:{uname:value}
                      }).then(response=>{
                        console.log(response.data)
                        if (response.data.data === "hasname") {
                          console.log("1")
                          callback(new Error('该用户名已经被注册'))
                        } else {
                          console.log("2")
                          callback()
                        }
                      })
                    }
                   console.log("首先执行我")
                }

数据库中已有admin用户名,此时输入admin应当提示已注册,但结果并没有,反而显示校验成功。
在这里插入图片描述
通过控制台发现前台查询到了后台接口提供的数据,也进入到了用户名已经注册的循环分支,但是却先执行的是最后一行的console.log("首先执行我").
在这里插入图片描述
苦思良久,在阅读了async/await和Promise讲解这篇博客以及看了一堆参考文档以后。发现少了一个关键字await:写在async内部,等待一个异步方法执行完成。async、await配合将异步强行转换为同步处理。
更改代码在axios请求request前加上await:

  await request({url:'/user/judgeName', methods:'get', params:{uname:value}

校验成功
在这里插入图片描述

你可能感兴趣的:(Vue,elementui,vue)