Http请求完成加载后执行功能

Question

I am using XMLHttpRequests to load large amounts of data from a Flask REST API for my Machine Learning project. Let's say I have the following (simplified) setup:

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?

The problem with this is that I can't know when both data has been stored to their respective variables (data1Storage and data2Storage). Since they are very large data, it takes quite a long time to load, and accessing them right away will return an undefined. How do I manipulate these two variables only when data has been stored in them? My first thought was to do an if statement like if (data1Storage!= undefined && data2Storage != undefined) , but that obviously does not work.

Answer 1

My suggestion is to change your data1Listener & data2Listener functions in the following way:

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);
    }
}

The async keyword in front of a function allows you to await inside of it.

The await keyword will, as its name suggests, wait for the completion of the current statement before moving onto the next line.

In these functions, the await appears before JSON.parse(this.responseText) .

Therefore, only once this.responseText has been fully parsed and contained by the data1Storage & data2Storage variables will the console.log lines execute.

If an error occurs at any time inside the try block, an error will be thrown by the catch block. (As an example, if this.responseText is invalid JSON and cannot be parsed, then the console.log will not run and an error instead will be printed.