Выполните функцию, когда запрос Http завершит загрузку

Question

Я использую XMLHttpRequests для загрузки больших объемов данных из REST API Flask для моего проекта машинного обучения.Допустим, у меня есть следующая (упрощенная) настройка:

const urlData1 = 'someUrl';
const urlData2 = 'someUrl';

var data1Req = new XMLHttpRequest();
var data2Req = new XMLHttpRequest();

data1Req.addEventListener("load", data1Listener);
data2Req.addEventListener("load", data2Listener);

var data1Storage;
var data2Storage;

function data1Listener() {
    data1Storage = JSON.parse(this.responseText);
}

function data2Listener() {
    data2Storage = JSON.parse(this.responseText);
}

data1Req.open("GET", urlData1, true);
data1Req.send();

data2Req.open("GET", urlData2, true);
data2Req.send();

// How do I do something with both data1Storage and data2Storge once they are loaded?

Проблема в том, что я не могу знать, когда обе данные были сохранены в соответствующих переменных (data1Storage и data2Storage).Поскольку они представляют собой очень большие данные, загрузка занимает довольно много времени, и прямой доступ к ним вернет неопределенное значение.Как мне манипулировать этими двумя переменными только тогда, когда в них хранятся данные?Моей первой мыслью было сделать оператор if наподобие if (data1Storage!= undefined && data2Storage != undefined), но это, очевидно, не работает.

Answer 1

Я предлагаю изменить data1Listener & data2Listener функции следующим образом:

async data1Listener() {
    try {
        data1Storage = await JSON.parse(this.responseText);
        console.log('Finished putting into data1Storage');
    } catch (e) {
        throw new Error(e);
    }
}

async data2Listener() {
    try {
        data2Storage = await JSON.parse(this.responseText);
        console.log('Finished putting into data2Storage');
    } catch (e) {
        throw new Error(e);
    }
}

Ключевое слово async перед функцией позволяет вам await внутри нее.

Ключевое слово await, как следует из его названия, будет ждать завершения текущего оператора, прежде чем перейти к следующей строке.

В этих функциях await появляется передJSON.parse(this.responseText).

Таким образом, только один раз this.responseText будет полностью проанализирован и содержится в переменных data1Storage & data2Storage, будут выполняться строки console.log.

Если произошла ошибкапроисходит в любое время внутри блока try, ошибка будет выдана блоком catch.(Например, если this.responseText является недопустимым JSON и не может быть проанализирован, то console.log не будет работать и вместо этого будет напечатана ошибка.