Javascript-異步等待不適用於條件

Question

我已經研究了好幾個小時，但對於異步/等待的工作方式卻越來越困惑。 現在我有以下代碼：

    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()響應為true后，才能做到這一點？ 我需要改變什么？ 我正在使用vue.js 2.1.10。

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

Answer 2

考慮一下：

  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(); 

上面的內容實際上代表了您的情況，因此考慮此簡單示例，很明顯，簡單地返回已解決的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)
        };
    }
<...>