ES2020 的新特性 import() 如何使用？

随着 JavaScript 的发展，前端工程师们常常会遇到需要异步加载模块的需求。在以往，要异步加载模块一般会使用 require.ensure() 或者 System.import() 等方式，但随着 ES2020 发布，新的 import() 方法带来了更好的异步加载体验。

import() 的定义和用法

import() 是 ES2020 中引入的一个新特性，它是一个函数，可以异步地加载模块，返回一个 Promise 对象，可以通过 then 方法获取模块的导出值。下面是一个示例代码：

import('/modules/myModule.js')
  .then((module) => {
    // 对 myModule 做操作
    console.log(module);
  })
  .catch((err) => {
    console.log('模块加载失败', err);
  });

可以看到，我们通过 import() 加载指定模块，然后在 Promise 的 then 方法中获取模块的导出值。如果模块加载失败将会在 catch 方法中捕获错误。

import() 一般会和动态 import 一起使用，以实现动态加载模块的效果。下面是一个示例代码：

const button = document.querySelector('#myButton');
button.addEventListener('click', async () => {
  const module = await import('/modules/myModule.js');
  module.default();
});

可以看到，我们定义了一个按钮，并在点击时异步地加载 myModule 模块。这里需要注意的是，由于 import() 方法返回的是一个 Promise 对象，因此使用时需要使用 async/await 或者 then 方法。

import() 的使用注意事项

除了基本的用法，我们还需要了解 import() 的一些限制和注意事项。

首先，import() 方法必须放置在其他代码的内部，而不能放置在最外层代码：

// 错误的写法
const modulePath = '/modules/myModule.js';
const module = import(modulePath);

其次，import() 方法只能加载 ES6 模块，不能加载 CommonJS 模块或者 JSON 文件。如果需要加载 CommonJS 模块或者 JSON 文件，可以使用其他方法实现。

最后，由于 import() 方法目前并不是所有浏览器都支持的，因此在使用过程中需要注意浏览器的兼容性。

总结

ES2020 中新特性 import() 方法为我们提供了更加优雅的模块异步加载方式，使得我们可以更加方便地实现动态加载模块。当然，在使用时也需要注意其注意事项，才能得到更好的使用效果。

希望本文能为大家更好地理解 import() 方法的使用方式，并在实际开发中实践运用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f52dfef6b2d6eab3dddab7