本篇內(nèi)容主要講解“vue如何實(shí)現(xiàn)同步”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue如何實(shí)現(xiàn)同步”吧!

創(chuàng)新互聯(lián)是一家以網(wǎng)站設(shè)計(jì),開發(fā)核心業(yè)務(wù)的專業(yè)網(wǎng)絡(luò)公司，創(chuàng)新互聯(lián)為客戶提供：軟文營銷、創(chuàng)新網(wǎng)站解決方案。我們的目標(biāo)是提高客戶網(wǎng)站項(xiàng)目的專業(yè)度，以創(chuàng)新和互聯(lián)的思維增加用戶體驗(yàn)并有效提高潛在客戶。

vue實(shí)現(xiàn)同步的方法：1、創(chuàng)建一個(gè)vue示例文件；2、通過“data(){return { userInfo: {id: '',username: '',password:'',avatar: '',},}}methods:{getUserInfo: function () {let _this = this;this.axios({...})”實(shí)現(xiàn)同步即可。

Vue中同步方法的實(shí)現(xiàn)

情景：在實(shí)現(xiàn)登錄功能的時(shí)候，通過表單的用戶名，向后臺(tái)發(fā)送請(qǐng)求，前端以為處理完成，繼續(xù)執(zhí)行，而還未等后臺(tái)數(shù)據(jù)返回，前端獲取到的用戶數(shù)據(jù)為空。

實(shí)現(xiàn)：等待請(qǐng)求方法返回?cái)?shù)據(jù)在繼續(xù)往下執(zhí)行，及實(shí)現(xiàn)同步方法

原代碼

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();
		// 為表單綁定驗(yàn)證功能
       this.$refs[formName].validate((valid) => {
           if (valid) {
               console.log("22222222");  
               console.log(_this.userInfo);
           } else {
           }
       });
  }}

控制臺(tái)打印

發(fā)現(xiàn)問題：1在2面輸出，并且從data里面賦值后仍為空

解決方法：使用async/await實(shí)現(xiàn)同步

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.
                // 為表單綁定驗(yàn)證功能
               _this.$refs[formName].validate((valid) => {
                   if (valid) {
                           console.log("22222222");  
               			console.log(_this.userInfo);
                       }
                   } else {
                   }
               });
           } else {
               // do other sth.
           }
       })
     
   }}

更改后的結(jié)果

到此，相信大家對(duì)“vue如何實(shí)現(xiàn)同步”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！