阻止异步提取在webpacked应用程序中完成

Posted 2021-03-28

我试图解决的问题是阻止外部json文件的获取，因此配置对象可以在其他地方使用。从本质上讲，有三个文件有助于此：

builder.jsx runtime.jsx

和一个json文件：

config.settings.json

runtime.jsx需要从uri加载config.settings.json并将已解析的对象数据返回到builder.jsx，在那里它被解析为一个配置对象，该对象将被导出以供整个代码使用。

我遇到的问题是从runtime.jsx导出的对象仅在builder.jsx读取后才被解析为结果，因此如果Promise未解析且undefined中的代码失败，则输入builder.jsx对象。

使情况进一步复杂化的是builder.jsx导出一个对象，该对象用于初始化整个应用程序中的许多其他组件。

重构逻辑以通过Promise.then（）填充builder.jsx的配置对象没有帮助，因为在Promise结算之前导出的对象是未定义的，因此如果Promise尚未解析，则使用它初始化的所有组件都会失败。

由于它们实际上是黑盒子的，因此无法在代码中的其他位置更新组件，因此我想要弄清楚的是让代码等到关键的json配置加载之后再继续。

我的问题是;有没有办法加载外部依赖项并明确阻止代码继续，直到它被加载？

runtime.jsx

let exportedResult;

fetch(require('/path/to/config.settings.json'))
.then(result => exportedResult = result.json());

export default exportedResult;

builder.jsx

import config from './runtime.jsx';

const globalSettings = {
   taskParameter: config.taskParams,
   someHardcodeValue: "avalue"

};

export default globalSettings;

config.settings.json

{
   "taskParams": "random"
}

答案

如果你控制runtime.jsx，让它导出一个promise-returns函数，而不仅仅是promise ...

runtime.jsx

function getConfig {
    return fetch(require('/path/to/config.settings.json')).then(result => result.json());
}

export default getConfig;

构建器代码继续这种模式......

builder.jsx

import config from './runtime.jsx';

const globalSettings = {
   someHardcodeValue: "avalue"
};

function initializeGlobalSettings () {
   config.getConfig().then(result => {
       globalSettings.taskParameter = result.taskParams;
   });
}

export default initializeGlobalSettings;

而builder.jsx的用户导入它，只要它认为合适就会触发initializeGlobalSettings()，并在返回的promise的then()中启动依赖于该结果的任何内容。