Как получить результат асинхронного запроса и вернуть его из функции?

Понимание проблемы: асинхронность и колбэки

Вы абсолютно правы: проблема в том, что JavaScript не ждет завершения AJAX-запроса. $.ajax — асинхронная операция, и функция getUserData завершается сразу, возвращая undefined, а колбэк success выполняется позже, когда данные приходят. Это фундаментальная особенность JavaScript: код не блокируется ожиданием I/O операций.

Есть три основных способа корректно обработать асинхронный результат:

1. Колбэки (Callbacks) — классический подход

Вместо возврата значения передайте функцию, которая будет вызвана с результатом:

function getUserData(userId, callback) {
    $.ajax({
        url: 'https://api.example.com/users/' + userId,
        method: 'GET',
        success: function(response) {
            callback(response);
        },
        error: function(error) {
            callback(null, error);
        }
    });
}

// Использование:
getUserData(42, function(data, error) {
    if (error) {
        console.error('Ошибка:', error);
        return;
    }
    console.log('Данные пользователя:', data);
    // Здесь можно работать с data
});

2. Промисы (Promises) — современный и гибкий способ

Оберните асинхронный вызов в Promise:

function getUserData(userId) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: 'https://api.example.com/users/' + userId,
            method: 'GET',
            success: function(response) {
                resolve(response);
            },
            error: function(error) {
                reject(error);
            }
        });
    });
}

// Использование с .then():
getUserData(42)
    .then(data => {
        console.log('Данные:', data);
    })
    .catch(error => {
        console.error('Ошибка:', error);
    });

// Или с async/await (ещё удобнее):
async function showUser() {
    try {
        const data = await getUserData(42);
        console.log('Данные:', data);
    } catch (error) {
        console.error('Ошибка:', error);
    }
}

showUser();

3. Использование встроенных методов jQuery (если вы используете jQuery)

Современный $.ajax сам возвращает Promise-подобный объект:

function getUserData(userId) {
    return $.ajax({
        url: 'https://api.example.com/users/' + userId,
        method: 'GET'
    });
}

// Использование:
getUserData(42)
    .done(data => {
        console.log('Данные:', data);
    })
    .fail(error => {
        console.error('Ошибка:', error);
    });

Важные моменты:

• Никогда не пытайтесь сделать асинхронную функцию синхронной — это приведет к зависанию интерфейса.
• Всегда обрабатывайте ошибки — используйте catch или колбэк для ошибок.
• Async/await — это синтаксический сахар над Promise, который делает код похожим на синхронный, но под капотом остаётся асинхронным.
• Для нескольких последовательных запросов используйте цепочки Promise или async/await с try/catch.

Рекомендую освоить промисы и async/await — это современный стандарт, который используется в большинстве проектов и делает код чище и читаемее.

async function getUserData(userId) {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
}

// Использование:
async function main() {
    try {
        const user = await getUserData(42);
        console.log('Имя:', user.name);
        console.log('Email:', user.email);
    } catch (error) {
        console.error('Не удалось получить данные:', error);
    }
}

main();

const [user, posts] = await Promise.all([
    getUserData(42),
    getUserPosts(42)
]);