Element-UI组件中Form表单resetFields()重置方法踩过的坑以及Vue中Axios同步异步请求踩过的坑，分享给大家！

关于Form表单中restFields()方法的官方解释

restFields()方法说明：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。

根据字面意思理解，调用这个方法会将表单所填写的数据重置为初始值并且移除表单校验的结果。

我最开始所理解的“初始化数据”是指的实例化Vue时在data中所声明的数据。如下图所示：

也就是说，调用restFields()会将数据充值为这里所声明的初始化数据。

在Vue中对表单初始化数据赋值，调用created函数

代码如下：

created: function() {
	axios.get("/index/oauth/getUserInfo", {
		params: {
			openId: this.openId
		}
	}).then((response) => {
		if (response.data.httpCode == 200) {
			let info = response.data.data;
			if (info.sex == 1) {
				info.sex = '男';
			} else if (info.sex == 0) {
				info.sex = '女';
			} else {
				info.sex = '未知';
			}
			// 将服务器返回的数据赋值给表单model
			this.ruleForm = info;
			if (info.userType == 2) {
				this.accountText = '学号';
				this.instituteText = '学院';
			} else {
				this.accountText = '工号';
				this.instituteText = '部门';
			}
		} else {
			this.$message.error(response.data.msg);
		}
	}).catch((error) => {
		console.error(error);
	});
}

前端页面截图如下：（因业务需求，工号，姓名以及部门不能修改）

一切正常，没有任何问题，关键点来了。

调用resetFields()方法重置表单

重置按钮的单击事件

<el-button @click="resetForm('ruleForm')">重置</el-button>

相对应调用的事件

resetForm(formName) {
	this.$refs[formName].resetFields();
}

问题就出现在这里，将我表单里面所有的数据都重置为data里面声明的初始值了，如下图所示：

工号，姓名以及部门都是禁用了的，数据重置过后用户也无法填写，这肯定不行啊，如何能重置为created函数里所初始化的数据呢？

经过网上资料查询，resetFields()方法会将表单数据重置为created函数里所初始化的数据，我就是在created函数中初始化的数据啊，为什么全部给我重置成data中的数据了？有毒？

后来我做了各种测试，各种查资料，各种写法测试，都还是不行。

例如：我将data中的数据赋值为null，我不声明初始值

这样做没问题！调用resetFields()重置表单过后，表单数据还在，而且是created函数中所初始化的数据，但是页面刷新的时候控制台会抛出一个新的错误，如下图所示：

实例化Vue的时候显示account属性为null，对于强迫症的我来说，肯定不允许这样的错误存在！所以我将data中的属性还是重新声明了并赋了初始值，那么问题回来了，重置表单的时候如何将数据保留在表单中呢？

为了验证“resetFields()方法会将表单数据重置为created函数里所初始化的数据”这句话，我在created函数中写死了数据，如下所示：

created: function() {
	this.ruleForm = {
		account: '123456',
		name: '张三',
		nickname: '梦想'
	}
}

当页面重置表单的时候，数据保留了下来，那就证明这句话是没问题的！那么我这里问题出在哪里呢？我明明也是在created函数中初始化的数据啊！

我仔细想了想，为什么写死数据没问题，一用Axios请求数据就出问题了呢？难道问题出在Axios上？我将Axios请求的数据用一个变量接收，并且在控制台打印出来，果然发现了不以样的地方！

created: function() {
	let data = axios.get("/index/consult/getAll", {
		params: {
			openId: this.openId
		}
	});
	console.log(data);
}

控制台打印的结果如下图所示：

诶嘿，Promise是什么鬼？似曾相识的感觉，赶紧问问度娘。
网上资料解释：Promise是异步编程的一种解决方法。（关于Promise的详细资料请自行上网查找）

异步！异步！异步！肯定就是这问题了！

遂百度Axios如何进行同步请求，因为第一次写Vue的项目，第一次使用Axios，所以我觉得应该就像Ajax那样设置async: false就可以同步请求了吧。

网上查找了一圈，基本上都说的是使用async+await来现实同步请求，在methods中声明函数调用，语法如下：

methods: {
    async funA(){
        var res =  await axios.post(''); //这里的res就是axios请求回来的结果
    }
}

我试着写了一下，在methods中声明一个函数，并且在created中调用。

created: function() {
	this.getUserInfo();
},
methods: {
	async getUserInfo() {
		let response = await axios.get("/index/oauth/getUserInfo", {
			params: {
				openId: this.openId
			}
		});
		if (response.data.httpCode == 200) {
			let info = response.data.data;
			if (info.sex == 1) {
				info.sex = '男';
			} else if (info.sex == 0) {
				info.sex = '女';
			} else {
				info.sex = '未知';
			}
			// 将服务器返回的数据赋值给表单model
			this.ruleForm = info;
			if (info.userType == 2) {
				this.accountText = '学号';
				this.instituteText = '学院';
			} else {
				this.accountText = '工号';
				this.instituteText = '部门';
			}
		} else {
			this.$message.error(response.data.msg);
		}
	}
}

页面刷新，表单数据初始化成功，但是当我点击重置的时候，数据还是没了…

难道是我同步请求写的不对吗？继续查询网上资料，写法基本上都大同小异，各种写法我都测试过，最终都以失败告终。

后看到有一片博客说Axios不支持同步请求，都是用的Ajax实现的同步请求。于是我放弃了，妥协了，在页面用引入了jQuery，使用Ajax同步请求，问题成功解决！也证明了确实就是异步请求所造成的的问题！代码如下：

created: function() {
	this.getUserInfo();
},
methods: {
	getUserInfo() {
		let vm = this;
		$.ajax({
			type: "get",
			url: "/index/oauth/getUserInfo",
			dataType: "json",
			async: false, // 同步请求
			data: {
				openId: this.openId
			},
			success: function(result) {
				if (result.httpCode == 200) {
					let info = result.data;
					if (info.sex == 1) {
						info.sex = '男';
					} else if (info.sex == 0) {
						info.sex = '女';
					} else {
						info.sex = '未知';
					}
					vm.ruleForm = info;
					if (info.userType == 2) {
						vm.accountText = '学号';
						vm.instituteText = '学院';
					} else {
						vm.accountText = '工号';
						vm.instituteText = '部门';
					}
				} else {
					vm.$message.error(result.msg);
				}
			}
		});
	},
}

总结：第一次做Vue的项目，Element-UI很好用，准备以后长期使用。不过有一个疑问，Vue官方推荐使用的Axios不支持同步请求吗？不应该啊！也许是我不知道，还望知道的前辈能指导一下。这也是我第一次写博客，写的不好的地方还请见谅，谢谢。