异步模块导入的背景
在 Deno 中，我们可以使用 import 语句来导入模块。但是，由于 JavaScript 是单线程执行的，如果我们在导入模块时遇到阻塞操作，就会导致整个程序执行被阻塞，无法继续执行后续代码。为了避免这种情况，Deno 引入了异步模块导入的机制。
异步模块导入的原理是，当我们使用 import 语句导入模块时，Deno 会立即返回一个 Promise 对象，而不是等待模块加载完成后再返回。这样，我们就可以在 Promise 的回调函数中继续执行后续代码，而不会被阻塞。
例如，下面的代码演示了如何使用异步模块导入：
const modulePromise = import("./module.js");
modulePromise.then(module => {
console.log(module);
});
console.log("Hello, Deno!");在这个例子中，我们使用 import 语句导入了一个名为 module.js 的模块，并将返回的 Promise 对象赋值给变量 modulePromise。然后，我们在 Promise 的回调函数中打印了模块对象，并在控制台输出了一条消息。由于 import 语句是异步执行的，所以控制台会先输出 "Hello, Deno!"，然后再输出模块对象。
异步模块导入的错误
虽然异步模块导入可以避免阻塞程序执行，但是它也带来了一些问题。其中一个问题是，由于 import 语句返回的是一个 Promise 对象，所以我们不能直接使用 import 语句导入模块并直接使用其中的变量或函数，而是需要在 Promise 的回调函数中使用导入的模块。
例如，下面的代码尝试使用异步模块导入导入一个名为 module.js 的模块，并直接使用其中的变量：
import { foo } from "./module.js";
console.log(foo);在这个例子中，我们使用 import 语句导入了一个名为 module.js 的模块，并尝试直接使用其中的变量 foo。但是，由于 import 语句返回的是一个 Promise 对象，所以这个例子会导致一个错误：
TypeError: Cannot destructure property 'foo' of 'undefined' as it is undefined.
这个错误的原因是，我们没有等待 import 语句返回的 Promise 对象执行完成，就尝试使用其中的变量。因此，变量 foo 在回调函数执行之前还没有被定义，所以会导致一个 undefined 错误。
解决异步模块导入的错误
为了解决异步模块导入的错误，我们可以使用 await 关键字来等待 import 语句返回的 Promise 对象执行完成。例如，下面的代码演示了如何使用 await 关键字导入模块并使用其中的变量：
const module = await import("./module.js");
console.log(module.foo);在这个例子中，我们使用 await 关键字等待 import 语句返回的 Promise 对象执行完成，并将返回的模块对象赋值给变量 module。然后，我们可以直接使用模块对象中的变量 foo。
需要注意的是，使用 await 关键字导入模块时，我们必须将 import 语句放在一个异步函数中，否则会导致语法错误。例如，下面的代码演示了如何在异步函数中使用 await 导入模块：
async function main() {
const module = await import("./module.js");
console.log(module.foo);
}
main();在这个例子中，我们定义了一个名为 main 的异步函数，并在其中使用 await 导入模块。然后，我们在函数末尾调用了 main 函数，以便执行异步函数。
总结
异步模块导入是 Deno 中非常重要的特性之一，可以避免阻塞程序执行。但是，由于异步模块导入返回的是一个 Promise 对象，所以我们必须在 Promise 的回调函数中使用导入的模块。为了方便使用，我们可以使用 await 关键字等待 import 语句返回的 Promise 对象执行完成，并直接使用其中的变量或函数。需要注意的是，使用 await 导入模块时，我们必须将 import 语句放在一个异步函数中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6605be8bd10417a22239876c