如何在JavaScript中使用await异步导出多个对象?
问题描述
我在MDN上看到这样的示例:
const colors = fetch("../data/colors.json").then((response) => response.json()); export default await colors;
但我现在有多个需要通过单个异步函数填充的常量:
const _receiversById = {}; const _receiversByServer = {}; const _sequenceReceivers = {}; // name - k-v receivers const _sequences = {}; // init async function _fetchAllReceivers(){ // 去数据库获取数据并填充这些常量,包含多个await操作 }
我困惑于如何让这些常量成为运行时可解析的Promise。我曾尝试将常量赋值为无参数的Promise对象:
const _receiversById = new Promise(); const _receiversByServer = new Promise(); const _sequenceReceivers = new Promise(); const _sequences = new Promise();
想在_fetchAllReceivers函数中调用.resolve(_receivers...),但怀疑这种方式不可行且难以调试。请问正确且优雅的实现方式是什么?
解决方案
方法一:封装为单个Promise对象并解构赋值
把需要初始化的所有常量打包到一个对象中,通过异步函数返回这个对象,之后用await获取并解构出各个常量。这种方式逻辑集中,便于维护:
async function _fetchAllReceivers() { // 模拟数据库异步操作 const rawData = await fetchDatabaseData(); // 初始化并填充各个结构 const receiversById = {}; const receiversByServer = {}; const sequenceReceivers = {}; const sequences = {}; // 这里编写具体的数据处理逻辑,比如遍历rawData填充上述对象 return { receiversById, receiversByServer, sequenceReceivers, sequences }; } // 顶层await获取所有常量 const { receiversById: _receiversById, receiversByServer: _receiversByServer, sequenceReceivers: _sequenceReceivers, sequences: _sequences } = await _fetchAllReceivers();
方法二:使用立即执行异步函数初始化(兼容无顶层await环境)
如果运行环境不支持顶层await,可以用立即执行的异步函数完成初始化,同时暴露一个初始化完成的Promise供外部判断状态:
let _receiversById, _receiversByServer, _sequenceReceivers, _sequences; const initCompleted = (async () => { const rawData = await fetchDatabaseData(); // 处理数据并赋值 _receiversById = {}; _receiversByServer = {}; _sequenceReceivers = {}; _sequences = {}; // 数据填充逻辑 })(); // 后续使用前需确保初始化完成 await initCompleted; // 此时可以安全访问所有常量
不推荐手动创建空Promise的原因
你之前尝试的手动创建空Promise再resolve的方式存在明显弊端:
- 需要额外维护Promise对象和resolve函数的引用,容易引发逻辑混乱或内存泄漏
- 调试难度高,无法直观追踪Promise的状态变化
- 违背了Promise封装异步操作的设计初衷,把它当成了全局状态容器
内容的提问来源于stack exchange,提问作者fedd
相关产品推荐
相关产品推荐

