javascript - 阻止异步获取以在 webpacked 应用程序中完成

Question

我试图解决的问题是阻止对外部 json 文件的获取，因此可以在其他地方使用配置对象。本质上，有三个文件促成了这一点:

builder.jsxruntime.jsx

和一个 json 文件:

config.settings.json

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

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

使情况更加复杂的是 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"
}

Answer 1

如果你控制 runtime.jsx，让它导出一个 promise 返回函数，而不仅仅是 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() 中启动依赖于该结果的任何内容.