在现代 web 应用程序中，异步加载数据是常见的操作。ES9 在 异步编程方面，引入了许多新概念和特性，使得编写异步代码变得更加简单和流畅。在本文中，我们将探讨如何使用 ES9 中的异步操作符，以及如何处理异步加载的数据。
Async / Await
最有可能在 ES9 中被广泛使用的新功能是 async/await。这是一种新的语言级别的构造，用于处理异步代码。在以前，我们通常会使用回调函数和 Promise 来管理异步代码的执行。但这些方法不仅使代码难以维护，而且容易出现 callback hell。
一个 async 函数返回一个 Promise，这个 Promise 在函数完成时变为 resolved 状态，并且 resolved 的值等于 async 函数的返回值。
以下是一个实现异步加载数据的 async 函数的示例：
-- -------------------- ---- ------- ----- -------- ---------- - ----- -------- - ----- ------------------------------------- ----- ---- - ----- ---------------- ------ ----- - -------------------- -- - -- ------- -------------- -- - -- ------- ---
异步函数使用 await 操作符等待异步操作完成，并返回结果。在上面的示例中，我们等待 fetch() 函数返回成功响应的对象，然后我们等待 response.json() 函数返回解析的 JSON 数据。这就是 async/await 的优点 - 能够以同步的方式处理异步代码。
Promise.allSettled
除了 async/await，ES9 还引入了一个叫做 Promise.allSettled 的新方法，用于处理多个 Promise。这个方法接收一个 Promise 数组作为参数，并返回一个新的 Promise 数组，该数组表示每个 Promise 的执行结果。
以下是一个实现同时加载多个数据的示例：
-- -------------------- ---- ------- ----- -------- ------------- - ----- ---- - -------------------------------- ------------------------------- -------------------------------- ----- -------- - ------------ -- ------------------------ -- ------------------ ----- ------- - ----- ----------------------------- ------ ------------------ -- -------------- - ----------------------- -- - -- ------- -------------- -- - -- ------- ---
在上面的示例中，我们使用 Promise.allSettled() 方法加载多个数据。该方法返回一个 Promise 数组，其中每个 Promise 数组表示每个 URL 的数据加载结果。最终，我们将结果映射到一个数组，以便使用它们。
总结
异步编程在现代 web 应用程序中是必不可少的。ES9 中的 async/await 和 Promise.allSettled 让异步编程变得更加简单和流畅。在编写异步代码时，请记住使用这些新特性，它们将大大提高您的代码的可读性和维护性。下面的代码片段示范了如何使用 Promises 和 async/await 操作符。
-- -------------------- ---- -------
----- -------- -------------- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
-
------ -- -- -
--- -
----- ----- - ----- ---------------------------------------
----- ----- - ----- ---------------------------------------
---------------------------
---------------------------
-- ---- ---- -- ------- ---- ----- --- -----
- ----- --- -
----------------
-
----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652137ca95b1f8cacd8b92d4