ES6 如何动态加载 import

ES6 提供了 import() 函数，可以实现动态加载模块。

使用 import() 函数，可以将import语句放在需要动态加载的地方，返回一个 Promise 对象。当 Promise 对象被 resolve 时，表示模块加载完成，可以使用模块提供的功能。

下面是一个示例，动态加载一个模块并使用其中的函数：

import('./module.js')
  .then(module => {
    // 模块加载完成后，在这里可以使用模块提供的功能
    module.default();
  })
  .catch(error => {
    console.error('模块加载失败', error);
  });

上述示例中，import('./module.js') 返回一个 Promise 对象，当模块加载完成时，then 方法中的回调函数会被调用，我们可以在回调函数中使用模块提供的功能。如果模块加载失败，catch 方法中的回调函数会被调用，我们可以在此处处理加载失败的情况。

需要注意的是，import() 函数返回的是一个 Promise 对象，可以与 async/await 配合使用，实现更方便的异步加载模块的写法：

async function loadModule() {
  try {
    const module = await import('./module.js');
    module.default();
  } catch (error) {
    console.error('模块加载失败', error);
  }
}

loadModule();

上述示例中，使用 await 关键字等待 import('./module.js') 返回的 Promise 对象，当模块加载完成时，继续执行后续代码。如果模块加载失败，catch 块中的代码会被执行。