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

Понимание асинхронности в JavaScript

Проблема, с которой вы столкнулись, — одна из самых распространённых среди начинающих разработчиков. JavaScript является однопоточным и асинхронным. Когда вы делаете запрос к серверу (через fetch, XMLHttpRequest или axios), выполнение кода не останавливается в ожидании ответа. Вместо этого JavaScript продолжает выполнять следующий код, а когда ответ приходит, вызывается колбэк (или разрешается промис).

В вашем примере:

• fetch() запускает асинхронную операцию и сразу же возвращает промис (объект-обещание).
• Код продолжает выполняться дальше: console.log('После fetch:', userData) и return userData.
• В этот момент userData ещё не присвоено значение, потому что запрос к серверу ещё не завершился.
• Через некоторое время (когда придёт ответ) выполняется колбэк внутри .then(), и переменная userData получает значение. Но функция getUserData уже завершилась и вернула undefined.

Решение 1: Использование промисов (Promise)

Вместо того чтобы пытаться вернуть данные синхронно, верните сам промис. Тогда вызывающий код сможет "подождать" результат с помощью .then() или await.

function getUserData(userId) {
    // Возвращаем промис, а не данные
    return fetch(`https://api.example.com/users/${userId}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Ошибка сети');
            }
            return response.json();
        });
}

// Использование:
getUserData(123)
    .then(user => {
        console.log('Полученные данные:', user);
        // Здесь можно работать с user
    })
    .catch(error => {
        console.error('Ошибка:', error);
    });

Решение 2: Использование async/await (рекомендуемый способ)

Синтаксис async/await — это "синтаксический сахар" над промисами, который делает асинхронный код похожим на синхронный. Функция, помеченная async, всегда возвращает промис. Внутри такой функции можно использовать await, чтобы "приостановить" выполнение до разрешения промиса.

async function getUserData(userId) {
    try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
            throw new Error('Ошибка сети');
        }
        const userData = await response.json();
        return userData; // Теперь это работает!
    } catch (error) {
        console.error('Ошибка:', error);
        throw error; // Пробрасываем ошибку дальше
    }
}

// Использование (обязательно в async-функции или с .then()):
async function main() {
    const user = await getUserData(123);
    console.log('Результат:', user);
}

main();

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

• Async-функция всегда возвращает промис. Даже если вы пишете return 42, на самом деле возвращается Promise.resolve(42).
• Await можно использовать только внутри async-функции. Не пытайтесь писать await на верхнем уровне модуля (в старых версиях JS это вызовет ошибку; в современных модулях это разрешено).
• Обрабатывайте ошибки. Всегда используйте try/catch с async/await или .catch() с промисами.
• Не смешивайте стили. Либо используйте цепочку .then(), либо async/await в одном блоке кода — это улучшает читаемость.

Теперь вы понимаете, что асинхронность — это не баг, а фича JavaScript. Вместо того чтобы "вернуть" результат, вы возвращаете обещание, что результат будет получен в будущем. Используйте промисы или async/await, и ваша программа будет работать правильно.

function getUserData(userId, callback) {
    fetch(`https://api.example.com/users/${userId}`)
        .then(response => response.json())
        .then(data => {
            callback(null, data); // Первый аргумент — ошибка (по конвенции Node.js)
        })
        .catch(error => {
            callback(error, null);
        });
}

// Использование:
getUserData(123, (error, user) => {
    if (error) {
        console.error('Ошибка:', error);
        return;
    }
    console.log('Полученные данные:', user);
});