Почему массив глобальной переменной стал пустым вне функции?

Question

[Umd23]

Есть небольшой скрипт на node.js, который сначала получает массив id, потом перемешивает их, далее ищет по id имена людей и записывает новый массив.
Но объявив глобальную переменную arrName, никак не получается вывести этот массив, а точнее он почему то пустой.

function shuffle(array) {
    array.sort(() => Math.random() - 0.5);
}
const arrName = [];
const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
const x = new XMLHttpRequest();
x.open('GET', 'https://slack.com/api/conversations.members?token=xxx&channel=xxx');
x.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
x.onload = function() {
    let array_1 = JSON.parse(this.responseText).members;
    shuffle(array_1);
    var array_cleaned = array_1.filter(function(element) {
        return element.length <= 9;
    });
    var array_cleaned2 = array_cleaned.filter(function(element2) {
        const y = new XMLHttpRequest();
        y.open('GET', 'https://slack.com/api/users.profile.get?token=xxx&user=' + element2);
        y.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        y.onload = function() {
        let array_2 = JSON.parse(this.responseText).profile.display_name;
            console.log('В группе состоит ' + array_2);
        arrName.push(array_2);
        }
        y.send();
    });
    console.log(array_cleaned);
    console.log(arrName);
}
x.send();

Почему console.log(arrName);
выводит просто пустой массив?
При этом если я проверяю arrName после строчки "arrName.push(array_2);" , то массив выводится(что логично 3 раза)

Answer 1

[AEVZP]

Асинхронные запросы.

console.log(arrName) - выводится раньше, чем выполнится всё то, что находится в array_cleaned2

Comments

[Umd23]

Точняяяк, я то думаю почему и пустой массив раньше всего по строкам выходится

[Дмитрий]

Umd23, И в коде стилистическая мешанина, плюс вы отчего-то не используете стрелочные функции, я бы написал так

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
const x = new XMLHttpRequest();
x.open('GET', 'https://slack.com/api/conversations.members?token=xxx&channel=xxx');
x.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
x.onload = () => {
    const array_1 = shuffle(JSON.parse(this.responseText).members)
    const array_cleaned = array_1.filter(v => v.length <= 9);
    array_cleaned.forEach(v => {
        const y = new XMLHttpRequest()
        y.open('GET', 'https://slack.com/api/users.profile.get?token=xxx&user=' + v);
        y.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        y.onload = () => {
            const displayName = JSON.parse(this.responseText).profile.display_name;
            console.log('В группе состоит ' + displayName)
            arrName.push(displayName);
            if (arrName.length === array_cleaned.length) console.log(arrName)
        }
        y.send();
    });
    console.log(array_cleaned);
}
x.send();

[Umd23]

Подписал async=false и все заработало) Вот я лошара конечно, спасибо еще раз

[AEVZP]

Но в чем сложность использовать промисы вместо XMLHttpRequest?
Сама суть асинхронных запросов -- это как раз не блокировать основной поток. Сейчас, если Вы отключили async, то дальше ничего не выполнится пока не будет получен ответ от сервера. А если ответ будет 10 секунд? Минута? (утрирую, конечно).

Вам это нужно переписать хотя бы с использованием fetch. Уверяю Вас, оставляя код так, вы сами стреляете себе в ногу.

[Павел Корнилов]

AEVZP, +1, но при этом XMLHttpRequest вполне себе может (и должен) делать асинхронный запрос.

[Umd23]

AEVZP, Спасибо за совет, сейчас буду переделывать :)

Answer 2

[Дмитрий]

Потому что вы заполняете его внутри callback-а, который на момент вывода console.log(arrName)
еще не был вызван.
Поставьте вывод после строчки
arrName.push(array_2);

чтобы убедиться, что сначала выводится пустой массив, а потом уже он начинает заполняться