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