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}

校验成功