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

叁歲伎倆 2022-11-10 10:55 263阅读 0赞

### 引言 ###

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

### 直接上代码 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]  
按照正常的理解，这个地方应该是没有问题的，但是从结果上却是啪啪打脸。一直拿不到应该拿到的结果

而后自己写了个demo测试

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
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 2]  
从这里的例子上看，elementUI的回调函数确实是个同步函数，这个没有任何的问题。  
但是这个例子和项目上的例子的差距在于

// 例子
    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)
    		}
    	})

于是，我代码改成了项目上类似的样子，然后运行，好的，问题出来了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 3]

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20221022/f71678fe1776447c9cb59647dbbe8ff1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]: /images/20221022/b515407b04c14bd6904645d80727bd34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 2]: /images/20221022/0c8786f6e4994afda99d55e07f5def22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 3]: /images/20221022/af3938cde7144034a47b54d83c57da41.png