vue가 동기화를 할 수 있나요?

vue를 동기화할 수 있습니다. vue가 동기화하는 방법은 다음과 같습니다. 1. vue 샘플 파일을 만듭니다. 2. "data(){return { userInfo: {id: '',사용자 이름: '',password:'',avatar: '',},}}methods:{getUserInfo: function () {let _this = this;this.axios({...} )"을 사용하여 동기화합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue 버전 3, DELL G3 컴퓨터

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 {
            }
        });
   }}

Console 인쇄

문제 발견: 두 번째 출력에 1이 있고 데이터에서 값을 할당한 후에도 여전히 비어 있습니다

해결책: 동기화를 달성하려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!