Return callback'a всегда возвращает undefined

@witcher4680 · Регистрация: 18.04.2015

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток!
Столкнулся со следующей проблемой:
Есть файл backend.js в нем объявляется функция в глобальную область видимости, которая в последствии будет вызваться для отправки ajax запроса. У функции всего 1 параметр - это функция callback, которая будет обрабатывать полученную из запроса информацию.
Есть второй файл setup.js, в HTML он объявляется после описанного выше backend.js. В этом файле описана функция callback, а так же вызывается функция описанная в backend.js. В конце функции callback'а написан return, который должен вернуть полученную из запроса информацию, но вместо этого он всегда возвращает undefined. При этом на строчку выше та же переменная, что и записана в return выводится в консоль и в консоли она действительно появляется. Получается, что информация получена с сервера и выводится в консоль, но почему-то return возвращает undefined. Изначально думал, что проблема заключается в работе с областями видимости функций, но ведь функция в backend.js объявлена глобально, да и в console.log тоже выводятся данные полученные с сервера. Помогите, пожалуйста понять, что делаю не так. Ниже привожу код двух файлов, а также то, что по итогу выполнения получаю в консоли.
JS я новичок, поэтому если вдруг я допустил, какую-то очевидную ошибку не судите строго.
Заранее благодарен!

backend.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
(function(){
    window.backend = {
        load: function(onLoad){
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "https://javascript.pages.academy/code-and-magick/data", false);
            xhr.addEventListener('load', function(){
                console.log("requested info loaded sucsesfull");
                onLoad(JSON.parse(xhr.responseText));
            });
            xhr.send();
        }
    }
})();

setup.js

JavaScript
1
2
3
4
5
6
var ff = function(data){
    console.log(data);
    return data;
};
var test1 = window.backend.load(ff);
console.log(test1);

Текст в консоли:
requested info loaded sucsesfull
(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
undefined

@amr-now · 13.06.2020, 14:10

Здравствуйте.
Один из статусов в социальной сети - "Семейное положение: сложно всё."
Попробуем упростить.

HTML5
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script src="scripts/backend.js"></script>
    <script src="scripts/setup.js"></script>
</body>
</html>

backend.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getJSONAsync(url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "json";
        xhr.onload = () => {
            if (xhr.status === 200)
                resolve(xhr.response);
            else
                reject(new Error(`${xhr.status}: ${xhr.statusText}`));
        };
        xhr.onerror = () => {
            reject(new Error(`Ошибка сети. Сервер не отдал код ошибки.`));
        };
        //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); // Для POST-запроса
        xhr.send();
    });
}

setup.js

JavaScript
1
2
3
4
5
(async function main() {
    // У асинхронной функции getJSONAsync() нужно дождаться результата с помощью await 
    let test1 = await getJSONAsync("https://javascript.pages.academy/code-and-magick/data");
    console.log(test1);
})();

Добавлено через 13 минут
DrType, D_Vik здесь файл backend.ts/backend.js принципиально не является модулем ES2015.

Вот так на житейских примерах и закрепляются знания. Файл в TS/JS по умолчанию не является модулем ES2015.
И все объявленные не внутри скобок имена в "не модуле" находятся в глобальной области видимости.

@witcher4680 · 13.06.2020, 17:05 **[ТС]**

Благодарю за ответ! Написанный Вами код решил проблему. Но не могли бы все же подсказать в чем причина того, что return не возвращает значение переменной, а вместо нее выводит undefined. Понимание сути и причины ошибки, помогло бы избежать проблем в будущем.
Заранее спасибо!

@amr-now · 13.06.2020, 17:52

witcher4680, причина - асинхронность. Прочитайте несколько статей про async/await.

Начните отсюда: https://learn.javascript.ru/async
Далее ищите в поисковике.
Нормально разобраться потребуется не меньше месяца, так что не паникуйте. Это предельно сложная тема.

@witcher4680 · 14.06.2020, 00:52 **[ТС]**

Принято. Благодарю!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@witcher4680 0 / 0 / 1 Регистрация: 18.04.2015 Сообщений: 52
	13.06.2020, 17:05 [ТС]
	Благодарю за ответ! Написанный Вами код решил проблему. Но не могли бы все же подсказать в чем причина того, что return не возвращает значение переменной, а вместо нее выводит undefined. Понимание сути и причины ошибки, помогло бы избежать проблем в будущем. Заранее спасибо! 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	13.06.2020, 17:52
	Сообщение было отмечено witcher4680 как решение Решение witcher4680, причина - асинхронность. Прочитайте несколько статей про async/await. Начните отсюда: https://learn.javascript.ru/async Далее ищите в поисковике. Нормально разобраться потребуется не меньше месяца, так что не паникуйте. Это предельно сложная тема. 0

@witcher4680 0 / 0 / 1 Регистрация: 18.04.2015 Сообщений: 52
	14.06.2020, 00:52 [ТС]
	Принято. Благодарю! 0

Return callback'a всегда возвращает undefined

Решение