在 JavaScript 中，await 运算符是一个非常有用且常用的功能，它的出现让异步编程更加简洁、易懂。在 ES2021 中，await 运算符有一些新的特性，如果你想在前端开发中更好地运用 await 运算符，那么你需要注意下面这些细节。
什么是 await 运算符？
在 ES2021 中，await 运算符是一种用于等待 Promise 返回结果的运算符，它的作用是暂停执行 async 函数，并等待 Promise 结果返回。在 Promise 对象执行结束之前，await 运算符会一直阻塞函数，并返回 Promise 结果。
下面是一个例子：
-- -------------------- ---- ------- ----- -------- --------- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------ ----- - --------------------- -- - ------------------ ---
在上面的例子中，在执行 fetch 和 response.json() 方法时，我们都使用了 await 运算符来等待 Promise 返回结果，这样我们就不需要手动处理 Promise，代码不仅简洁易懂，而且也更加可读。
ES2021 新特性：Top-level await
在 ES2021 中，我们可以在模块的顶层使用 await 运算符，这个新特性就是 Top-level await。这个特性就是让我们在模块顶层等待一个 Promise 返回结果并暂停模块加载，直到 Promise 结束后再继续加载模块。
下面是一个例子：
const response = await fetch('https://api.github.com/users');
const data = await response.json();
export default data;在上面的例子中，我们使用了 Top-level await 运算符来等待 Promise 返回结果，并将结果导出为模块默认值。在模块加载时，如果这个模块默认值需要等待一个 Promise 返回结果，那么模块加载会停止，直到 Promise 结束后再继续加载。
注意 await 运算符的错误处理
在使用 await 运算符时，我们需要注意错误处理。如果一个 Promise 返回了 reject 状态，那么使用 await 运算符时，会抛出一个错误。为了避免应用崩溃，我们需要使用 try/catch 语句捕获错误。
下面是一个例子：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- --- -
-----------------
-
-
--------------------- -- -
------------------
---在上面的例子中，我们使用 try/catch 语句来捕获错误，如果 Promise 返回 reject 状态，我们会在控制台输出错误信息，而不是让应用崩溃。
总结
在 ES2021 中，await 运算符的 Top-level await 新特性为我们的开发带来了更多便利。但是在使用 await 运算符时，我们需要注意错误处理，避免应用崩溃。如果你想在前端开发中更好地运用 await 运算符，那么就需要注意上述细节，这样可以让你的代码更加优雅、易懂、健壮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499353548841e989462c968