elementUI 表单校验在await中变成异步的情况

引言

最近，在项目中遇到了一个问题。在表单校验中调用await方法，并调用接口，在得到接口的返回值时，返回一些数值给上一层函数。但是由于elementUI的表单验证内部的某些原因，导致本该是同步的方法变成了异步的。

直接上代码

按照正常的理解，这个地方应该是没有问题的，但是从结果上却是啪啪打脸。一直拿不到应该拿到的结果

而后自己写了个demo测试

代码语言：javascript复制

async buttonTest() {
    let submitLess = false
    submitLess = await this.testTest()
    console.log(submitLess)
    console.log('-----------')
}
async testTest() {
    let test1 = false
    console.log('11111111111111', test1)
    await this.$refs['infoForm'].validate(valid => {
        if (valid) {
            test1 = this.test()
            console.log('AAAAAAAAAA', test1)
        }
    })
    console.log('22222222222', test1)
    return test1
}
test() {
    let test123 = 111
    const params = {}
    await getList(params).then(async(res) => {
        if (res.data.code === 'success') {
            test123 = true
        } else {
            test123 = false
        }
    })
    console.log('tttttttttttttttt', test123)
    return test123
}

从这里的例子上看，elementUI的回调函数确实是个同步函数，这个没有任何的问题。

但是这个例子和项目上的例子的差距在于

代码语言：javascript复制

// 例子
await this.$refs['infoForm'].validate(valid => {
        if (valid) {
            test1 = this.test()
            console.log('AAAAAAAAAA', test1)
        }
    })
// 项目
await this.$refs['infoForm'].validate(async(valid) => {
        if (valid) {
            test1 = await this.test()
            console.log('AAAAAAAAAA', test1)
        }
    })

于是，我代码改成了项目上类似的样子，然后运行，好的，问题出来了

这段表单验证的代码变成异步的了！

而如果需要让他依旧是同步的话，则需要将代码改成如下这样

代码语言：javascript复制

await this.$refs['infoForm'].validate().then(async(valid) => {
        if (valid) {
            test1 = await this.test()
            console.log('AAAAAAAAAA', test1)
        }
    })

具体原因，应该是表单校验里面的回调函数那部分代码，在用了await的情况下，会变成异步函数。所以elementUI在后续加上了一步判断，如果validate里面传了参数（回调函数），那就正常走回调函数的步骤，如果没有传参，则返回一个promise函数。具体还是要看源码，这里就不多赘述了

elementui javascript node.js 编程算法

0 人点赞