我一直在研究它几个小时,我对async / await如何工作仍然越来越困惑。现在我有这个代码:
created: function () {
Event.$on('open-stage', (stage) => {
this.$validator.validateAll().then(() => {
const validateFields = async () => {
const uniqueEmail = await this.checkIfUniqueEmail();
if(uniqueEmail) {
console.log('uniqueEmail is true'); // <-- this is what I need to achieve
Event.$emit('change-stage', this.wizardStage.successor);
}
};
validateFields();
}).catch(() => {
toastr.warning('Error');
Event.$emit('change-stage-denied');
return true;
});
});
},
methods: {
checkIfUniqueEmail() {
if (!this.player.email || !this.player.email.length) {
return true;
}
this.$http.post('playerExists', {
email: this.player.email
}).then(response => {
if (response.data.exists) {
toastr.error(Good');
Event.$emit('change-stage-denied');
return false;
}
return true;
}).catch(error => {
toastr.warning('Fail');
Event.$emit('change-stage-denied');
return false;
});
},
}
我的目标很简单 - 如果方法checkIfUniqueEmail()
返回true,我想看到console.log并发出change-state
。问题是常量uniqueEmail
始终未定义。只有在函数checkIfUniqueEmail()
的响应为真后,我才能这样做?我需要改变什么?我正在使用vue.js 2.1.10。
答案 0 :(得分:1)
您需要让您的方法返回承诺
checkIfUniqueEmail() {
if (!this.player.email || !this.player.email.length) {
return true;
}
return this.$http.post('playerExists', {
email: this.player.email
}).then(response => {
if (response.data.exists) {
toastr.error('Good');
Event.$emit('change-stage-denied');
return false;
}
return true;
}).catch(error => {
toastr.warning('Fail');
Event.$emit('change-stage-denied');
return false;
});
}
答案 1 :(得分:1)
考虑一下:
async function validateFields() {
var uniqueEmail = await checkIfUniqueEmail();
if(uniqueEmail) {
console.log('uniqueEmail is true');
}
}
function checkIfUniqueEmail(){
return new Promise(resolve => {
setTimeout(() => {
resolve('johny@bravo.com');
}, 1000)
})
}
validateFields();
&#13;
以上,实际上代表了你的情况,所以考虑到这个简单的例子,很明显只需返回一个已解决的Promise即可。所以你可以这样做:
this.$http.post('playerExists', {
email: this.player.email
}).then(response => {
if (response.data.exists) {
toastr.error('Good');
Event.$emit('change-stage-denied');
return new Promise(resolve => {
resolve(true)
};
}
<...>