Http請求完成加載后執行功能

Question

我正在使用XMLHttpRequests從我的機器學習項目的Flask REST API加載大量數據。 假設我有以下（簡化）設置：

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將不會運行，而是顯示錯誤。