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

引言

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

直接上代码

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

而后自己写了个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
}

从这里的例子上看，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)
		}
	})

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

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

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

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

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