使用 async/await 加载库对象答案

【问题标题】：Loading library objects using async/await使用 async/await 加载库对象
【发布时间】：2021-01-20 15:50:43
【问题描述】：

我一直在使用@zzzzBov 的fantastic loadScript() function 来使用Promises 加载JS 库。但是，将所有加载的库的 Promises 链接在一起变得乏味和混乱。我想切换到async/await 解决方案，但是——因为loadScript() 函数不会返回我需要的可用库对象——这并不像使用.then() 那样简单。

函数返回一个负载Event，我await。所以我最初的方法是在 Promise 返回时定义一些无用的常量，然后在 if 语句中引用它们：

let loadedGlobalObject: any;
const lib1Loaded: Event = await loadScript(lib1URL);
const lib2Loaded: Event = await loadScript(lib2URL);

if (lib1Loaded && lib2Loaded) { // Makes this block dependent upon the await statements
   loadedGlobalObject = (window as any).globalObject;
   console.log(loadedGlobalObject);
}

这是正确的形式吗？我不知道如何“调用”await 语句； if 语句是我的第一个猜测。所以我想知道这是否是最好的解决方案，或者是否有更有效/被接受的技术（我知道我可以将 libXLoaded 常量替换为 if 语句，但我会考虑可读性）。

【问题讨论】：

你能用Promise.all()吗？
你需要那些“无用的常量”，尤其是 if 语句？

标签： javascript asynchronous async-await es6-promise

【解决方案1】：

如果我理解你想要做什么 - 你想await 加载你的库，并且只有在加载后才访问全局对象。像这样的东西呢：

try {
  async function loadLibs () {
    const lib1Event: Event = await loadScript(lib1Url);

    let loadedGlobalObject: any;
    loadedGlobalObject = (window as any).globalObject;
    console.log(loadedGlobalObject);
  }

  loadLibs();
  
catch (err) {
  console.log('Error loading script: ', err);
}

loadScript() 函数 rejects 如果在加载脚本时出错，那么您可以将代码包装在 try...catch 中。否则，它resolves 并且您可以访问它的全局对象。

请注意，您只能在标记为 async 的函数中调用 await。

【讨论】：

在这种形式中，您根本不需要存储事件响应。

【解决方案2】：

原来我根本不懂async/await。我原以为awaited 常量是响应式的，引用它们的行只有在它们的 Promise 解决后才会运行；相反，它只是等待函数的其余部分。

对于错误处理，正如@dwosk 回答的那样，您可以使用 try-catch，尽管我并不担心这一点。正如@Rezaa91 评论的那样，我可以使用await Promise.all([])，除了我正在按顺序加载依赖项。而且，现在我更好地理解了await 语句，正如@dwosk 和@Bergi 指出的那样，我不需要定义这些常量。

总而言之，我修改后的代码（添加了Promise.all() 是为了好玩）如下所示：

let loadedGlobalObject: any;
await Promise.all([loadScript(dependency1), loadScript(dependency2)]);
await loadScript(library1);
// Will have been loaded by now.
loadedGlobalObject = (window as any).globalObject;
console.log(loadedGlobalObject);

【讨论】：