需求很简单,在注册时检测用户名是否已经注册,在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}
校验成功