如何在异步操作完成后导出ES6模块？

这问题我之前也碰到过，确实有点棘手——模块级别的顶层代码没法直接用await，不过有几个实用的方案能完美解决：

方案1：导出一个包装了初始化流程的Promise #

把你的异步初始化逻辑放到一个立即执行的async函数里，让它返回完成初始化后的store实例，然后导出这个Promise：

class Store { 
  async dummy() { 
    await somethingElse(); 
  } 
} 

const store = new Store();
// 用async IIFE包装异步初始化，导出Promise
export const readyStore = (async () => {
  await store.dummy();
  return store;
})();

导入的时候，只需要await这个Promise就能拿到就绪的实例：

import { readyStore } from './your-store-module.js';
const store = await readyStore;
// 现在store已经完成异步初始化了

方案2：使用顶层await（推荐，环境支持的话） #

如果你的运行环境支持顶层await（Node.js 14.8+、现代浏览器、Vite/Webpack等构建工具），那这是最简洁的方案——直接在模块顶层用await：

class Store { 
  async dummy() { 
    await somethingElse(); 
  } 
} 

const store = new Store();
// 直接在顶层等待异步操作完成
await store.dummy();

export { store };

这样导入模块的时候，会自动等待初始化完成，拿到的store就是“异步就绪”的状态，不需要额外处理。

方案3：在类内部管理初始化状态 #

如果不想改变导出方式，也可以在Store类内部维护一个初始化Promise，对外提供一个等待方法：

class Store { 
  constructor() {
    // 构造函数里启动异步初始化，保存Promise
    this._ready = this.dummy();
  }

  async dummy() { 
    await somethingElse(); 
  }

  // 对外暴露等待初始化完成的方法
  async ready() {
    await this._ready;
    return this;
  }
} 

const store = new Store();
export { store };

导入后调用ready()方法等待初始化：

import { store } from './your-store-module.js';
await store.ready();
// 现在可以安全使用store了

内容的提问来源于stack exchange，提问作者Thomas