在前端开发中，我们经常需要处理异步操作。之前的写法往往比较啰嗦，容易出错，而且代码可读性不高。ES9（即 ECAMScript 2018）引入了 Async/Await 和 Promise.allSettled 等新特性，让我们能更优雅和高效地处理异步链式操作。
Async/Await
Async/Await 是一种基于 Promise 的语法糖，可以让异步操作代码看起来像同步操作。它本质上是一种特殊的函数，函数声明时加上 async 关键字，函数体内部的异步操作前面加上 await 关键字。
Async
声明一个 async 函数：
async function fetchData() {
// 异步操作
}Await
在 async 函数中使用 await 来等待 Promise 的返回结果：
async function fetchData() {
const data = await fetch('/api/data')
console.log(data)
}在上面的示例中，fetch('/api/data') 返回的是 Promise 对象，await 会等待 promise 树 resolved 后再执行 console.log。需要注意的是，await 只能在 async 函数内部使用，否则会导致语法错误。
当 Promise 树 rejected 时，会抛出异常。使用 try/catch 来捕获异常：
async function fetchData() {
try {
const data = await fetch('/api/data')
console.log(data)
} catch (error) {
console.error(error)
}
}让异步操作更优雅
使用 Async/Await 可以让异步操作更加优雅，比如下面的代码：
fetchData().then((data) => {
console.log(data)
}).catch((error) => {
console.error(error)
})可以改写为：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- ---- - ----- -----------
-----------------
- ----- ------- -
--------------------
-
-
---------这样，我们的代码看起来更简洁明了，可读性更高。同时，Async/Await 也使得处理异步链式操作变得更加容易。
Promise.allSettled
Promise.allSettled 用于处理多个 Promise，返回所有 Promise 的结果，不管是否 resolved，都会返回一个状态为 settled 的 Promise 对象。resolved 的 Promise 对象的返回值会包含在数组里，rejected 的 Promise 对象的异常信息也会包含在数组里。
使用 Promise.allSettled 可以同时处理多个异步操作，这样就不需要写大量的嵌套代码了。
下面是一个示例，假设我们需要从两个 URL 获取数据：
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - -------------------
----------------------------- ----------------------- -- -
---------------------- -- -
-- -------------- --- ------------ -
------------------ -- -------------
- ---- -
------------------- -- --------------
-
--
--当所有的 Promise 树 settled 后，results 才会被执行。在执行 results 时，我们可以通过检查 result.status 的值来判断对应的 Promise 是否 resolved。如果 resolved，我们可以通过 result.value 获取返回值；如果 rejected，我们可以通过 result.reason 获取异常信息。
示例代码
下面是一个示例代码，展示了如何使用 Async/Await 和 Promise.allSettled 来处理异步操作：
-- -------------------- ---- -------
----- -------- -------------- -
----- -------- - ----- ----------
-- ------------- -
----- ---- - ----- ---------------
------ ----
- ---- -
----- --- -------------- -------- --- --- -----
-
-
----- -------- --------- -
--- -
----- ------- ------ - ----- -------------------------------------------- -------------------------
-- ------------- --- ------------ -
------------------- -- ------------
- ---- -
--------------------- -- -------------
-
-- ------------- --- ------------ -
------------------- -- ------------
- ---- -
--------------------- -- -------------
-
- ----- ------- -
--------------------
-
-
---------在上面的代码中，我们先定义了一个 fetchData 函数，用来获取数据。然后定义了一个 logData 函数，在该函数中使用 Promise.allSettled 同时获取两个 URL 的数据，并使用 Async/Await 来处理 Promise 对象的返回值。
如果 Promise 正常 resolved，我们就可以通过 data.status === 'fulfilled' 来获取返回值；如果 Promise 异常，我们就可以通过 data.reason 获取异常信息。通过这种方式，我们就可以更加优雅地处理异步链式操作了。
结论
ES9 的 Async/Await 和 Promise.allSettled 等新特性，让我们能更优雅和高效地处理异步操作。使用 Async/Await 可以让异步操作更加优雅，而使用 Promise.allSettled 则可以同时处理多个异步操作。在实际开发中，我们可以结合使用这两个特性，让我们的代码变得更加优雅和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672428532e7021665e127a73