[英]Execute a function when Http Request finishes loading
我正在使用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)
,但是显然不起作用。
我的建议是通过以下方式更改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
将不会运行,而是显示错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.