如何在 JavaScript 中的异步函数之外使用 await

作者

在 JavaScript 的异步函数之外使用 await

How to use await outside of an async function in JavaScript

有多种方法可以在函数await外部使用运算符async
：

  1. 如果使用Node version ，请使用高于16.12.0或设置type为文件module中的
    Node.js 版本    。    package.json14.8.0 - 16.11.0
  2. 通过在 script 标签中设置type为将JS 脚本作为模块加载。module
  3. 使用立即调用的函数表达式。

使用立即调用的函数表达式

这是最广泛支持的方法——使用立即调用的函数表达式。

索引.js
// 👇️ Example promise
const p = Promise.resolve('bobbyhadz.com');

(async () => {
  try {
    const value = await p;
    console.log(value); // 👉️ "bobbyhadz.com"
  } catch (err) {
    console.log(err);
  }
})();

从技术上讲，我们在这里定义了一个async函数，但是，我们立即调用该函数并访问已解析的值。

如果承诺被拒绝，拒绝的原因将传递给区块
catch。

如果您在客户端工作，您可以
在该表中检查浏览器对顶级等待caniuse功能的支持。

我还写了一篇关于
如何访问 promise 的值的详细指南。

在浏览器中使用顶级等待

我们可以通过在加载 JS 文件时将属性
await设置为来使用顶级功能。typemodule

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- ✅ type is set to module ✅ -->
    <script type="module" src="index.js"></script>
  </body>
</html>

这使我们能够直接使用顶级
等待
。

索引.js
const p = Promise.resolve('bobbyhadz.com');

try {
  const value = await p;
  console.log(value); // 👉️ "bobbyhadz.com"
} catch (err) {
  console.log(err);
}

使用 top-level 时await，使用try/catch块非常重要，因为拒绝承诺导致的未捕获异常可能会阻止您的应用程序运行。

索引.js
// 👇️ Example rejected promise
const p = Promise.reject('Something went wrong');

try {
  const value = await p;
  console.log(value);
} catch (err) {
  // 👇️ catch the error here
  console.log(err); // 👉️ "Something went wrong"
}

在 Node.js 中使用顶级 await

如果您使用 Node.js 版本或更新版本，则可以直接16.12.0使用顶级，
无需更改任何内容。await

如果您的 Node.js 版本在范围内14.8.0 - 16.11.0，则需要
在文件中将type属性设置为。modulepackage.json

包.json
{
  "type": "module",

  // ...rest
}

如果您的项目没有package.json文件，请通过发出
npm init -y命令创建一个。

壳
npm init -y

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：