vue该如何实现同步
发布时间：2023-07-19 10:30:20 所属栏目：教程 来源：互联网
导读： 本篇内容主要讲解“vue如何实现同步”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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 { } }); }} 控制台打印 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. } }) }} （编辑：吕梁站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
