JavaScript 中 async/await 怎么在动态导入（import()）模块时处理异步加载-js教程-PHP中文网

async/await 可直接配合动态导入 import() 使用，因 import() 返回 promise；它非语法糖而是标准异步调用，天然适配 await；需在 async 函数或支持 top-level await 的环境中使用，失败可用 try/catch 捕获。

javascript 中 async/await 怎么在动态导入（import()）模块时处理异步加载

async/await 可以直接配合动态导入 import() 使用，因为 import() 本身返回一个 Promise，而 await 正好用来等待这个 Promise 解析完成。

动态导入本质是 Promise

import() 不是语法糖，而是标准的异步函数调用，返回一个解析为模块对象的 Promise。所以它天然适配 async/await：

不需要额外包装成 Promise 或用 Promise.resolve()
不能在顶层（非 async 函数内）直接 await，但可在 async 函数或模块顶层（ES2022+ 支持 top-level await）中使用
导入失败会抛出异常，可用 try/catch 捕获

基本用法示例

在 async 函数中加载模块并使用导出内容：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

async function loadChartLib() {
  try {
    const { default: Chart } = await import('chart.js');
    // ✅ Chart 是实际的默认导出
    new Chart(ctx, { /* config */ });
  } catch (err) {
    console.error('图表库加载失败:', err);
  }
}

按需加载 + 条件判断

结合业务逻辑动态决定加载哪个模块：

根据用户操作、路由、配置等条件触发不同 import()
避免提前加载未用到的功能模块

async function renderComponent(type) {
  let Component;
  switch (type) {
    case 'table':
      Component = (await import('./components/Table.js')).default;
      break;
    case 'chart':
      Component = (await import('./components/Chart.js')).default;
      break;
    default:
      throw new Error(`不支持的组件类型: ${type}`);
  }
  return new Component();
}