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

时间:2018-12-20 00:27:34

标签: javascript html http ecmascript-6 xmlhttprequest

我正在使用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 (data1Storage!= undefined && data2Storage != undefined)之类的if语句,但这显然行不通。

1 个答案:

答案 0 :(得分:0)

我的建议是通过以下方式更改data1Listenerdata2Listener函数:

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.responseTextdata1Storage变量完全解析并包含data2Storage后,console.log行才会执行。

如果try块内随时发生错误,则catch块将引发错误。 (例如,如果this.responseText是无效的JSON并且无法解析,则console.log将不会运行,而是会显示错误。