Почему возвращает undefined при post запросе?

Question

[BuBux]

let email = document.querySelector('#email');

function checkNoExist(em, check) {
    $.post("/user/checkemail", {
        email: em,
        check: check
    }, onAjaxSuccess
    );
}

function onAjaxSuccess(data) {
    if (data == 0) return false;
    return true;
}

let re = checkNoExist(email.value, 1);
console.log(re);

В функции onAjaxSuccess data возвращает корректный результат. Но вот при выводе переменной re всегда undefined. В чём может быть ошибка? Читал, что вроде как console.log выводит результат до ответа post запроса. Но никак не понял как решить данную задачу.

Answer 1

[FTOH]

В JavaScript запросы асинхронные. Результат запроса доступен внутри коллбека, который выполниться после запроса.

let email = document.querySelector('#email');

function checkNoExist(em, check) {
    return $.post("/user/checkemail", {
        email: em,
        check: check
    });
}

console.log('Вывод до запроса');
const promise = checkNoExist(email.value, 1);
console.log('Запрос отправлен, результата ещё нет');
promise.then(data => {
    console.log('Запрос выполнен успешно');

    const result = data !== 0
    console.log(result);
}).catch(error => {
   console.log('Получили ошибку', error)
})
console.log('Результата все ещё нет...');

Comments

[BuBux]

Не получается правильно встроить ваш вариант. Я обрабатываю форму регистрации. Функция checkNoExist проверяет существует ли введенный email в бд. Так у меня построена логика:

let email = document.querySelector('#email');
let name = document.querySelector('#name');
let password = document.querySelector('#password');
let confPassword = document.querySelector('#conf_password');

let error = 0;
let msg_cont = '';

function checkNoExist(em, check) {
    $.post("/user/checkemail", {
        email: em,
        check: check
    }, onAjaxSuccess
    );

}

function onAjaxSuccess(data) {
    if (data == 0) return false;
    return true;
}

document.getElementById("employee_form").onsubmit = function (e) { myFunction(e) };

function myFunction(e) {
    e.preventDefault();

    //...проверки полей

    if (error === 0) {
        if (!checkNoExist(email.value, 1)) {
            msg_cont = `Пользователь с email'ом ${email.value} уже существует`;
            error = 1;
        }
    }

    // вывод ошибки
    if (error === 1) {
        //....
    }
    // end
}

Не понимаю, как правильно обработать checkNoExist.

[BuBux]

FTOH , сделал так, но если введенный email существует в бд, то сообщение с ошибкой отображается когда кнопка нажата второй раз. При первом нажатии не реагирует.

let el = document.querySelector('#right-form');

let email = document.querySelector('#email');
let name = document.querySelector('#name');
let password = document.querySelector('#password');
let confPassword = document.querySelector('#conf_password');

let error = 0;
let msg_cont = '';

function checkNoExist(em, check) {
    return $.post("/user/checkemail", {
        email: em,
        check: check
    });
}

document.getElementById("employee_form").onsubmit = function (e) { myFunction(e) };

function myFunction(e) {
    e.preventDefault();

    // очищаем элемент с текстом ошибки
    if (document.querySelector('#error_message')) {
        document.querySelector('#error_message').remove();
        error = 0;
    }

    //тут проверки полей
    // end

    if (error === 0) {
        const promise = checkNoExist(email.value, 1);
        promise.then(data => {
            
            if (data == 0) {
                msg_cont = `Пользователь с email'ом ${email.value} уже существует`;
                error = 1;
            }
        });
    }

    // вывод ошибки
    if (error === 1) {
        return el.insertAdjacentHTML("beforeBegin", `<div class="alert alert-danger mt-1 alert-validation-msg" id="error_message" role="alert"><i class="feather icon-info mr-1 align-middle"></i>${msg_cont}</div>`);
    }
    // end
}

[FTOH]

BuBux, колбэк выполнится ПОСЛЕ функции myFunction. Добавтье везде выводы в консоль и посмотрите в каком порядке они вызываются.

Вот информация по теме:
https://learn.javascript.ru/callbacks
https://learn.javascript.ru/promise-basics

[BuBux]

FTOH, за информацию спасибо, буду читать. Сделал таким способом:

function checkNoExist(em, check) {
    return $.post("/user/checkemail", {
        email: em,
        check: check
    });
}

if (error === 0) {
        const checkEmail = checkNoExist(email.value, 1);
        checkEmail.then(data => {
            if (data == 0) {
                msg_cont = `Пользователь с email'ом ${email.value} уже существует`;
                return el.insertAdjacentHTML("beforeBegin", `<div class="alert alert-danger mt-1 alert-validation-msg" id="error_message" role="alert"><i class="feather icon-info mr-1 align-middle"></i>${msg_cont}</div>`);
                // error = 1;
            } else { 
                // register
            }
        });

Это по сути Ваш способ. Но правильным ли я образом написал? Работать вроде работает, но возможно код нужно оптимизировать?

[FTOH]

BuBux,

Но правильным ли я образом написал?

Да