基于vue axios用户注册重复校验的问题(一)

1.问题代码:

 基于vue axios用户注册重复校验的问题(一)_第1张图片

 ​​​​基于vue axios用户注册重复校验的问题(一)_第2张图片

2.问题现象

基于vue axios用户注册重复校验的问题(一)_第3张图片

输入新用户名

 基于vue axios用户注册重复校验的问题(一)_第4张图片

 基于vue axios用户注册重复校验的问题(一)_第5张图片

输入已有用户名

 基于vue axios用户注册重复校验的问题(一)_第6张图片

前台页面在输入用户名时通过发送ajax请求查询数据库,确实查到重复用户名,但不能成功在控制台打印信息,看上去像是then回调函数中的方法没有被执行,如果没有被执行,前台又怎会成功提示用户名存在呢?

3.原因分析

1)Ajax作为异步请求,被发送时then作为回调函数它需要等到服务器给出响应后才会执行其中的步骤;

2)在前台收到服务器响应前会继续向下执行其他代码,此时打印的flag和this.usernameErrorMsg属性中的值是用户名称基本格式校验通过后的值(通过校验后才会发送Ajax请求);

3)服务器查询数据库并将响应送至浏览器后,修改usernameErrorMsg的值,页面提示用户名存在。

4.解决办法

加上asayc和await关键字

基于vue axios用户注册重复校验的问题(一)_第7张图片

 async函数执行时,如果遇到await就会先暂停执行,等到触发的异步操作完成后,恢复async函数并返回解析值。

简单来说就是发送同步请求,此时重复上述操作,浏览器控制台能看见打印的信息

基于vue axios用户注册重复校验的问题(一)_第8张图片

你可能感兴趣的:(java,javascript)