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
시나리오에서 동기화 방법 구현: 로그인 기능을 구현할 때 프런트 엔드에서는 처리가 완료되었다고 생각하고 실행을 계속하지만, 그 전에는 양식의 사용자 이름을 통해 백그라운드로 요청이 전송됩니다. 백그라운드 데이터가 반환되고 프런트 엔드에서 얻은 사용자 데이터가 비어 있습니다.
구현: 요청 메서드가 데이터를 반환할 때까지 기다린 후 계속 실행하고 동기화 메서드를 구현합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!