vue可以做同步嗎

藏色散人
發布: 2023-01-29 11:33:54
原創
1530 人瀏覽過

vue可以做同步,vue實作同步的方法:1、建立一個vue範例檔;2、透過「data(){return { userInfo: {id: '',username: '',password:'',avatar: '',},}}methods:{getUserInfo: function () {let _this = this;this.axios({...} )」實作同步即可。

vue可以做同步嗎

##本教學操作環境:Windows10系統、Vue 3版、DELL G3電腦

vue可以做同步嗎?

##Vue中同步方法的實現

情境:在實現登入功能的時候,透過表單的用戶名,向後台發送請求,前端以為處理完成,繼續執行,而還未等後台資料返回,前端獲取到的用戶資料為空。

實作:等待請求方法返回資料在繼續往下執行,及實現同步方法

vue可以做同步嗎

原始程式碼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可以做同步嗎

發現問題: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可以做同步嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!