vue如何实现同步

本篇内容主要讲解“vue如何实现同步”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue如何实现同步”吧!

创新互联是一家以网站设计,开发核心业务的专业网络公司，创新互联为客户提供：软文营销、创新网站解决方案。我们的目标是提高客户网站项目的专业度，以创新和互联的思维增加用户体验并有效提高潜在客户。

vue实现同步的方法：1、创建一个vue示例文件；2、通过“data(){return { userInfo: {id: '',username: '',password:'',avatar: '',},}}methods:{getUserInfo: function () {let _this = this;this.axios({...})”实现同步即可。

Vue中同步方法的实现

情景：在实现登录功能的时候，通过表单的用户名，向后台发送请求，前端以为处理完成，继续执行，而还未等后台数据返回，前端获取到的用户数据为空。

实现：等待请求方法返回数据在继续往下执行，及实现同步方法

原代码

data() {
         	return {

               userInfo: {
                   id: '',
                   username: '',
                   password: '',
                   avatar: '',
               },
           }}methods:{
	getUserInfo: function () {
   	let _this = this;
   	this.axios({
       	url: "http://localhost:8088/verifyLogin",
       	headers: {
           	'Content-Type': 'application/json;charset=utf-8'
       	},
       	method: "post",
       	params: {
           	'userName': _this.form.username        	}
   	}).then(function (resp) {
       	_this.userInfo = resp.data;
       	console.log('11111111');
   	})
	},
   
   
   onSubmit(formName) {
       let _this = this;
       this.getUserInfo();
		// 为表单绑定验证功能
       this.$refs[formName].validate((valid) => {
           if (valid) {
               console.log("22222222");  
               console.log(_this.userInfo);
           } else {
           }
       });
  }}

控制台打印

发现问题：1在2面输出，并且从data里面赋值后仍为空

解决方法：使用async/await实现同步

data() {
         	return {

               userInfo: {
                   id: '',
                   username: '',
                   password: '',
                   avatar: '',
               },
           }}methods:{
	async getUserInfo(params) {
   	let _this = this;
   	let isSuccess = false;
   	await this.axios({
       	url: "http://localhost:8088/verifyLogin",
       	headers: {
           	'Content-Type': 'application/json;charset=utf-8'
       	},
       	method: "post",
       	params: {
           	'userName': _this.form.username        	}
   	}).then(function (resp) {
       	_this.userInfo = resp.data;
           console.log("11111111");
       	isSuccess = true;
   	});
   	return isSuccess;
	},

   onSubmit(formName) {
       let _this = this;
       this.getUserInfo(_this.form.username).then(function (result) {
           if (result) {
               // do sth.
                // 为表单绑定验证功能
               _this.$refs[formName].validate((valid) => {
                   if (valid) {
                           console.log("22222222");  
               			console.log(_this.userInfo);
                       }
                   } else {
                   }
               });
           } else {
               // do other sth.
           }
       })
     
   }}

更改后的结果

到此，相信大家对“vue如何实现同步”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

名称栏目：vue如何实现同步
新闻来源：http://mswzjz.cn/article/pijspe.html