Promise 是 JavaScript 中常用的处理异步操作的方式，但是在多层级嵌套的情况下，可能会出现回调地狱的问题，让代码难以维护和阅读。为了解决这个问题，ES10 （即 ECMAScript 2019）引入了两个新特性：async/await 和 Promise.allSettled。
async/await
async/await 是 ES10 中最重要的特性之一。它让我们可以使用类似于同步代码的方式来处理异步操作。我们可以使用 async 关键字来定义一个异步函数，然后在其中使用 await 关键字来等待一个异步操作完成。
让我们来看一个使用 async/await 来处理多层级嵌套问题的例子。假设我们有两个异步函数 getUserInfo 和 getUserRole，它们分别从服务器获取用户信息和用户角色。如果我们要在页面上显示用户名和角色，我们可以这样做：
-- -------------------- ---- -------
----- ------------ - ----- -- -- -
--- -
----- -------- - ----- --------------
----- -------- - ----- -----------------------------
---------------------- --------------------- --------- --------------
- ----- ------- -
---------------------
-
--在上面的代码中，我们使用 async 关键字定义了一个异步函数 showUserInfo()。在其中，我们首先使用 await 来等待异步函数 getUserInfo() 的结果。当 getUserInfo() 完成后，我们将返回的结果存储在 userInfo 变量中。然后，我们使用 userInfo.userId 作为参数来调用异步函数 getUserRole()，并使用 await 等待其完成。当两个异步操作都完成后，我们就可以使用它们的结果来显示用户名和角色了。
Promise.allSettled
Promise.allSettled 是另一个 ES10 引入的新特性，它可以帮助我们处理多个 Promise 对象的状态，并且会等待所有 Promise 对象都 settle 后再返回结果。这个方法的返回值是一个数组，数组中每个元素的值包含了与相应的 Promise 对象相关的信息。
下面是一个使用 Promise.allSettled 来处理多个异步操作的例子：
-- -------------------- ---- -------
----- ----------- - -
-----------------------------------------------
-----------------------------------------------
----------------------------------------------
--
----- ------------- - ----- -- -- -
--- -
----- --------- - ----- -------------------
------------------- -- -----------
--
----- ----- - ---------
---------------- -- --------------- --- ------------
------------- -- -----------------------
-------------------
- ----- ------- -
---------------------
-
--在这个例子中，我们定义了一个数组 requestUrls，其中包含了三个不同的 URL。我们使用 fetch() 函数来获取这些 URL 对应的数据，并使用 Promise.allSettled 等待所有 Promise 对象 settle。当所有 Promise 都 settle 后，responses 变量存储了每个 Promise 对象的状态和值。我们使用 .filter() 和 .map() 函数对 responses 数组进行处理，在其中筛选出状态为 fulfilled 的 Promise 对象，并将它们的结果存储在 users 变量中。
结论
async/await 和 Promise.allSettled 都是 ES10 中非常有用的特性，可以帮助我们处理多层级嵌套中的异步操作。使用它们可以让代码更清晰，易于维护和阅读。当你在开发前端应用的时候遇到多个异步操作需要处理的情况时，不妨试试这些新特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67022b24d91dce0dc846a688