Функция возвращает истину, несмотря на то, что обещание оценивается как ложное

Мне очень сложно понять поведение Promises. Я использую Vue и vee-validate библиотеку, которая позволяет проверять форму вручную с помощью:

this.$validator.validate()

Однако, когда я пытаюсь использовать его, я получаю странное поведение:

async isFormValid() {
    return await this.$validator.validate();
},

Всякий раз, когда я отправляю форму с ошибками, форма отправляет запрос AJAX:

onApprove() {
    if (!that.isFormValid) {
        return false;
    }
    $.ajax({
        ...         
    });
    return false; // Modal never closes unless AJAX is successful.
},

Кроме того, я пробовал следующую конструкцию:

onApprove() {
    this.$validator.validate().then(result => {
        if(result) {
            $.ajax({
                ...        
            });
        }
        return false; // Modal never closes unless AJAX is successful.
     });
},

Но это тоже не работает. Я нашел обходной путь, сделав это:

isFormValid() {
    this.$validator.validate();
    return Object.keys(this.fields).every(key => this.fields[key].valid);
},

Но если бы кто-нибудь мог объяснить, что я неправильно понимаю в `Promise, было бы здорово.

Изменить

Полный пример onApprove (всегда возвращает true независимо от проверки:

onApprove() {
    that.$validator.validate().then(result => {
        if (result) {
            $.ajax({
                url: '/settings/user_management_add_user', method: 'POST', data: {
                    csrfmiddlewaretoken: that.csrfToken, password: that.password, user: JSON.stringify(that.users[that.activeUserRow]),
                }, success() {
                    $('#modify_user_modal').modal('hide');
                    that.showToast('check icon', gettext('User created'));
                    that.activeUserRow = undefined;
                    that.initialQuery();
                }, error(data) {
                    that.showToast('remove icon', gettext('User could not be created'));
                    if (data.responseText && data.responseText.length < 20) {
                        that.showToast('remove icon', data.responseText);
                    }
                },
            });
        }
        return false; // Modal never closes unless AJAX is successful.
    });
},

Этот метод также не работает (сначала верните false):

onApprove() {
    that.$validator.validate().then(result => {
        if (!result) {
            return false
        }
            $.ajax({
                url: '/settings/user_management_add_user', method: 'POST', data: {
                    csrfmiddlewaretoken: that.csrfToken, password: that.password, user: JSON.stringify(that.users[that.activeUserRow]),
                }, success() {
                    $('#modify_user_modal').modal('hide');
                    that.showToast('check icon', gettext('User created'));
                    that.activeUserRow = undefined;
                    that.initialQuery();
                }, error(data) {
                    that.showToast('remove icon', gettext('User could not be created'));
                    if (data.responseText && data.responseText.length < 20) {
                        that.showToast('remove icon', data.responseText);
                    }
                },
            });
        return false; // Modal never closes unless AJAX is successful.
    });
},

javascript vue.js vee-validate
person Darkstarone    schedule 22.06.2018    source источник
comment
Вы никогда не ждете результата вашего запроса ajax, поэтому возврат false выполняется сразу после вызова ajax.   -  person Axnyff    schedule 22.06.2018
comment
Если выполняется return false, то модальное окно не должно закрываться (потому что OnApproval имеет значение false), поэтому это не объясняет, почему он всегда закрывается (он же возвращает true).   -  person Darkstarone    schedule 22.06.2018
comment
Ваш метод onApprove возвращает undefined в этом фрагменте: вы ничего не возвращаете внутри своей функции   -  person Axnyff    schedule 22.06.2018
comment
Как вы используете метод onApprove для закрытия модального окна?   -  person Axnyff    schedule 22.06.2018
comment
Это модальное окно semantic-ui, поэтому, если метод onApprove возвращает true, он закрывается, если возвращает false, нет.   -  person Darkstarone    schedule 22.06.2018
comment
Похоже, вам придется сделать это вручную, если вы хотите закрыть модальное окно: github .com / Semantic-Org / Semantic-UI / issues / 935 Не работает с асинхронной проверкой.   -  person Axnyff    schedule 22.06.2018
comment
Черт побери, спасибо, что нашел это для меня!   -  person Darkstarone    schedule 22.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Итак, @Axnyff нашел этот отчет о семантическом интерфейсе пользователя, который привел меня к решению:

onApprove() {
    that.$validator.validate().then((result) => {
        if (result) {
            $.ajax({
                ...
                },
                complete() {
                    $('#modify_user_modal').modal('hide'); // Manually hide.
                },
            });
        }
    });
    return false; // Modal never closes.
},
person Darkstarone    schedule 22.06.2018