从 ES2017 (ES8) 开始，JavaScript 引入了 async/await，这是一种处理异步任务的简便方法。但是，直到 ES11，我们才能在模块的顶层使用 await 语句。这意味着我们可以在加载模块时等待异步操作完成，而无需另外的代码或包装器函数。

什么是 top-level await?

top-level await 意味着现在我们可以在 JavaScript 模块的顶层级别使用 await，这与使用 async 函数在模块的内部使用 await 不同。

换句话说，当我们导入模块时，await 关键字允许我们暂停模块的解析和执行，直到一个异步操作完成并返回数据。top-level await 允许我们捕获异步操作的结果，而不必在其后引入另一个级别的异步函数调用。

注意：top-level await 使用时需要在模块文件开头添加 'use strict'，并且要注意使用顶层级别的异步等待可能会影响您的应用程序性能。

如何正确使用 top-level await?

top-level await 已经可以在 Chrome、Node.js、V8 版本 9.0 中使用。

在使用 top-level await 时，需要遵守以下规则：

• 导出等待的异步操作，以确保在线程安全的情况下保留同步性能。

  // 示例代码：使用 top-level await 来导入一个异步执行的函数
  import { getData } from './api.js';
  const result = await getData();
  export default result;

• 确保在模块的顶层级别使用 await 方法之前，所有导入和引用都已经完成。

  // 示范示例代码：模块的内部不得使用任何级别的异步函数调用
  let result;
  setTimeout(() => {
    result = 'Hello, World!';
  });
  export default result;

• 避免在循环或内部函数中使用 top-level await。

-- -------------------- ---- -------
  -- -------------------- --------- -----
  --- ------ ---- -- ------ -
    ----- ---- - ----- --------------
    -- ---
  -
  
  -- ---- ----- --------
  ----- -------- ----------- -
    --- ------ ---- -- ------ -
      ----- ---- - ----- --------------
      -- ---
    -
  -
  ------------

• 可以将 await 方法移入包装器函数，以使代码更简洁

   // 示范示例代码：将导入操作放入包装器函数中以触发 top-level await
   async function loadData() {
      const result = await import('./module.js');
      console.log(result.default);
   }
   loadData();

结论

top-level await 可以使 JavaScript 中的异步操作更简单、更快，但是如果不遵循其规则，它可能会导致一些问题。在读取、解析和执行代码时，请确保始终遵循最佳实践，以获得最佳性能和可读性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729b98d2e7021665e256fc3