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如何實現同步”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！