当 Http Request 完成加载时执行一个函数答案

【问题标题】：Execute a function when Http Request finishes loading当 Http Request 完成加载时执行一个函数
【发布时间】：2018-12-20 00:27:33
【问题描述】：

我正在使用 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 语句，但这显然行不通。

【问题讨论】：

你的 if 语句应该可以工作，只是你需要把它放在 data1Listener 和 data2Listener 中。

标签： javascript html http ecmascript-6 xmlhttprequest

【解决方案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 将不会运行，而是会打印错误。

【讨论】：