原生JS基于语言动态加载数据：动态import数据复用疑问

你的动态import思路是对的，核心问题是异步加载的数据需要适配异步逻辑，以下是几种实用的原生JS解决方案：

方案1：将依赖数据的逻辑封装为函数，在数据加载完成后调用 #

把所有需要用到points的功能代码（比如初始化地图、渲染标记等）封装成独立函数，在then回调里拿到数据后执行这个函数：

// 封装依赖数据的逻辑
function initMap(points) {
  // 原来基于固定数据集开发的功能代码，比如：
  points.forEach(point => {
    console.log('渲染点位:', point.id);
    // 其他地图操作逻辑...
  });
}

// 加载多语言数据
import(`./data-${lang}.js`)
  .then((data) => {
    const points = data.points;
    initMap(points); // 传入数据执行功能
  })
  .catch((error) => {
    console.error('数据加载失败:', error);
  });

方案2：用async/await简化异步流程 #

将加载数据的逻辑封装成异步函数，在需要使用数据的地方通过await获取，代码更接近同步写法：

// 封装加载数据的异步函数
async function loadLanguageData(lang) {
  // 先校验语言合法性，避免加载不存在的文件
  const validLangs = ['en', 'de'];
  const targetLang = validLangs.includes(lang) ? lang : 'en';
  
  try {
    const data = await import(`./data-${targetLang}.js`);
    return data.points;
  } catch (error) {
    console.error('数据加载失败:', error);
    return []; // 返回默认空数组避免后续报错
  }
}

// 在需要使用数据的地方（注意：必须在async函数内使用await）
async function main() {
  const points = await loadLanguageData(lang);
  // 这里直接使用points，和原来固定数据集的写法一致
  console.log('可用点位数据:', points);
  // 执行其他功能逻辑...
}

// 启动主流程
main();

方案3：全局变量存储（不推荐用于复杂项目） #

如果项目规模很小，可以把加载后的数据挂载到全局对象，其他代码使用时注意判断数据是否已加载完成：

// 加载数据时存入全局
import(`./data-${lang}.js`)
  .then((data) => {
    window.langPoints = data.points;
    // 数据加载完成后触发自定义事件，通知其他代码
    window.dispatchEvent(new CustomEvent('langDataLoaded'));
  })
  .catch((error) => {
    console.error('数据加载失败:', error);
  });

// 其他文件中监听事件，等待数据加载完成
window.addEventListener('langDataLoaded', () => {
  const points = window.langPoints;
  // 使用points执行逻辑...
});

注意事项 #

• 务必校验lang参数的合法性，防止加载不存在的data-xxx.js文件导致报错；
• 异步逻辑中要处理加载失败的情况，避免后续代码因无数据而崩溃；
• 如果是框架项目（如React、Vue），可以结合框架的状态管理（useState、Vuex/Pinia）存储数据，组件自动响应数据变化。

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