JavaScript 中动态 import() 怎么返回 Promise 并实现模块按需异步加载-js教程-PHP中文网

import() 返回 Promise 是因它是 ECMAScript 规定的异步函数调用，运行时发起请求并返回 Promise，加载完成 resolve，失败 reject；支持 async/await、条件加载、路由/组件懒加载，路径须字面量，模块为命名空间对象，需错误处理。

javascript 中动态 import() 怎么返回 promise 并实现模块按需异步加载

动态 import() 本身就是返回一个 Promise，它天然支持按需异步加载模块，无需额外包装。

为什么 import() 返回 Promise

import() 是 ECMAScript 标准规定的异步函数调用语法（不是语句），浏览器和 Node.js 运行时在解析到它时，会发起网络请求（或读取本地文件），并返回一个 Promise。这个 Promise 在模块加载、解析、执行完成后 resolve，失败时 reject。

例如：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

```js
import('./utils.js')
  .then(module => {
    console.log(module.default); // 模块默认导出
    module.helper(); // 命名导出方法
  })
  .catch(err => console.error('加载失败:', err));
```

常见使用方式

配合 async/await 更简洁：在 async 函数中直接 await，代码更线性可读
条件加载：根据用户操作、权限、设备类型等决定是否加载某模块
路由级代码分割：单页应用中，每个路由组件用动态 import 加载，实现“访问才加载”
组件级懒加载：React 的 React.lazy()、Vue 的 defineAsyncComponent() 底层都基于它

注意事项与技巧

路径必须是字符串字面量或确定的表达式：不能是拼接的变量（如 import('./' + name + '.js')），否则构建工具（如 Webpack/Vite）无法静态分析并拆包
模块对象是命名空间对象：即使模块只导出 default，也要通过 module.default 访问；命名导出则为 module.xxx
支持顶层 await（在模块作用域）：现代环境（ESM 模块）中可直接写 const mod = await import('./foo.js');
错误处理不可省略：网络中断、404、语法错误都会导致 Promise reject，建议始终加 catch 或 try/catch

简单实用示例

点击按钮后加载并使用一个图表模块：

```js
document.getElementById('chartBtn').addEventListener('click', async () => {
  try {
    const { renderChart } = await import('./charts/bar.js');
    renderChart(document.getElementById('chart-container'));
  } catch (err) {
    console.error('图表模块加载失败', err);
    alert('功能暂不可用');
  }
});
```