在前端开发中，异步编程是非常常见的操作，例如发送网络请求、处理文件读写等操作都需要使用异步编程来保证程序的流畅性和响应速度。在 ES6 中，JavaScript 引入了 Promise 对象来处理异步编程，但是在实际使用中，Promise 仍然存在一些问题，例如代码可读性不高、异常处理不方便等。ES8 引入了 async/await 来解决这些问题，而在 ES12 中，async/await 也有了一些新的功能和特性。
async/await 简介
async/await 是基于 Promise 的一种异步编程模型。async 函数是一个返回 Promise 对象的函数，await 表达式可以在 async 函数中等待 Promise 对象的解析结果，从而使得异步编程更加简单和易于理解。
async/await 的语法非常简单，例如：
----- -------- ----------- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------ ----- -
在这个例子中，fetchData 函数使用 async 关键字定义，表明它是一个异步函数。在函数内部，使用 await 关键字等待 fetch 函数返回的 Promise 对象解析结果，然后再使用 await 等待 response.json() 方法返回的 Promise 对象解析结果。最后，fetchData 函数返回解析后的数据。
ES12 新增的 async/await 功能
1. Promise.any()
在 Promise.all() 中，只有所有 Promise 对象都解析成功，Promise.all() 才会返回成功的结果，如果其中一个 Promise 对象出现异常，Promise.all() 就会返回失败的结果。而在 Promise.any() 中，只要其中一个 Promise 对象解析成功，Promise.any() 就会返回成功的结果，如果所有 Promise 对象都解析失败，Promise.any() 就会返回失败的结果。
例如：
----- -------- ----------- -
----- -------- - -
---------------------------------------
---------------------------------------
--------------------------------------
--
----- ------ - ----- ----------------------
------ -------
-在这个例子中，fetchData 函数使用 Promise.any() 等待三个 Promise 对象解析结果，如果其中一个 Promise 对象解析成功，fetchData 函数就会返回成功的结果。
2. Promise.allSettled()
在 Promise.all() 和 Promise.any() 中，只有所有 Promise 对象都解析完毕或者其中一个 Promise 对象解析成功，Promise.all() 和 Promise.any() 才会返回结果。而在 Promise.allSettled() 中，不管 Promise 对象解析成功还是失败，Promise.allSettled() 都会返回所有 Promise 对象的解析结果。
例如：
----- -------- ----------- -
----- -------- - -
---------------------------------------
---------------------------------------
--------------------------------------
--
----- ------- - ----- -----------------------------
------ --------
-在这个例子中，fetchData 函数使用 Promise.allSettled() 等待三个 Promise 对象解析结果，不管 Promise 对象解析成功还是失败，fetchData 函数都会返回所有 Promise 对象的解析结果。
3. try/catch
在 async/await 中，使用 try/catch 来捕获异步函数中的异常是非常方便的，而在 ES12 中，try/catch 还可以捕获 Promise 对象的异常。
例如：
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
------ -----
-
-在这个例子中，fetchData 函数使用 try/catch 来捕获 fetch 和 response.json() 方法中可能出现的异常，如果出现异常，fetchData 函数会返回 null。
总结
ES12 中新增的 async/await 功能使得异步编程更加简单和易于理解。Promise.any() 可以在多个 Promise 对象中只要一个解析成功就返回结果，Promise.allSettled() 可以返回所有 Promise 对象的解析结果，try/catch 可以捕获异步函数和 Promise 对象中的异常。这些功能的引入使得 JavaScript 的异步编程变得更加强大和灵活。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6629f047c9431a720c77fd48