使用异步 (async, await) JavaScript 导出全局变量

Question

好的，目标是将全局 scope 变量与我需要的内部信息相等，然后将其导出。 但我做不到（即使当我控制数据时，我仍然无法定义，我得到了我想要的信息）。 我查看了几个文档和其他人的问题NodeJS Async/Await Exporting a Variable ，但它仍然没有回答我的问题。 我知道我必须使用异步 JavaScript （异步，等待），但因为我对 JS 相当陌生。 注意：GETAPRODUCTAPI 是 SpringBoot API 并且updateClick()在另一个方法中被调用。

我要导出的名为 dataToExport 的全局变量等于数据 (then(data))。

export var dataToExport;

const updateClick = () => {
    const editBtns = getQSelectorAll(".edit");
    editBtns.forEach((btn) => {
        btn.addEventListener("click", (e) => {
            const currentClicked = e.currentTarget.dataset.editid;
            const api = GETAPRODUCTAPI + currentClicked;

            fetch(api).then((response) => {
                return response.json();
            }).then((data) => {
                console.log(data); // this works fine
                // TODO
                dataToExport = data
            });
        });
    });
};
console.log(dataToExport); // undefined output

Answer 1

这可行，但您必须确保在实际设置变量的异步代码之后读取dataToExport 。

也就是说，通过任何必要的方式，您需要等待console.log(dataToExport)直到发生以下所有情况：

1. updateClick被调用并且事件监听器已经被绑定到按钮
2. 实际点击了按钮（以编程方式或通过用户交互）
3. fetch(es) 被发送出去
4. 收到对 fetch(es) 的响应
5. 响应 json 被解析并分配给dataToExport 。

正如您在任何这些步骤发生之前尝试读取dataToExport一样，因此尚未设置变量。 您可以定期轮询以查看变量是否已被分配（例如setTimeout或setInterval ），或者是否有触发检查此变量的事件。

Answer 2

根据@arcyqwerty 的解释，我能够弄清楚一个逻辑。 我创建了两个全局范围一个变量status和一个 function changedStatus changedStatus() 。 等同于 null 的状态，然后是 changedStatus changedStatus() ，其工作是检查status何时从 null 更改为其他状态（触发检查此变量的事件）。 注意：我将dataToExport重命名为status

let status = null;
let changedStatus = (value) => {
    status = value;
    if (status != null) {
        console.log(status);
    }
} 

const updateClick = () => {
    const editBtns = getQSelectorAll(".edit");
    editBtns.forEach((btn) => {
        btn.addEventListener("click", (e) => {
            const currentClicked = e.currentTarget.dataset.editid;
            const api = GETAPRODUCTAPI + currentClicked;

            fetch(api).then((response) => {
                return response.json();
            }).then((data) => {
                // TODO
                changedStatus(data);
            });
        });
    });
};

至于像@Bergi所说的那样导出dataToExport ，在用户点击之前导出数据是没有意义的，所以我使用了localStorage 。 这个例子有助于更好地理解。