温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue如何实现同步

发布时间:2023-01-29 13:55:04 阅读:454 作者:iii 栏目:web开发
Vue开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇内容主要讲解“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 {            }        });   }}

控制台打印

vue如何实现同步

vue如何实现同步

发现问题: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如何实现同步”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI

开发者交流群×