在 JavaScript 中，异步操作非常常见，如网络请求、定时器、事件监听等等。传统的异步操作使用回调函数来处理，但这种方式容易引起“回调地狱”，阅读和维护困难。ES6 中引入了 async/await 特性，可以使异步操作的程序结构更清晰，阅读和维护更容易。
async/await 简介
async/await 是一种基于 Promise 的语法糖，能够帮助我们更方便地处理异步操作。其中，async 用于修饰函数，表示该函数返回的是一个 Promise 对象；await 用于修饰 Promise 对象，表示等待 Promise 对象的 resolve 结果。
以下是一个简单的例子：
-- -------------------- ---- -------
----- -------- ----- -
---------------------
----- ------ - ----- --- --------------- -- -
------------- -- -
---------------
-- ------
---
--------------------
-
------输出结果为：
Start End
函数 foo 返回的是一个 Promise 对象。在函数内部，使用 await 等待 setTimeout 方法的 resolve 结果。在 resolve 后，才会执行下一行代码。这保证了程序的顺序性。
使用 async/await 处理异步操作
1. 处理 promise
在使用 async/await 前，需要掌握 Promise API。
以下是一个例子，使用 Promise 处理异步操作：
-- -------------------- ---- -------
-------- ----------- -
------ --- --------------- -- -
------------- -- -
----------------
-- ------
---
-
--------------------- -- -
------------------
---输出结果为：
Data
使用 async/await 可以使代码更清晰简洁：
-- -------------------- ---- -------
----- -------- ----------- -
------ --- --------------- -- -
------------- -- -
----------------
-- ------
---
-
----- ---- - ----- ------------
------------------输出结果同上。
2. 处理多个 promise
当需要异步处理多个操作时，可以使用 Promise.all。
以下是一个例子：
-- -------------------- ---- -------
-------- ------------ -
------ --- --------------- -- -
------------- -- -
------------- ----
-- ------
---
-
-------- ------------ -
------ --- --------------- -- -
------------- -- -
------------- ----
-- ------
---
-
----- ------- ------ - ----- -------------------------- ---------------
------------------ -------输出结果为：
Data 1 Data 2
3. 错误处理
使用 try/catch 可以捕获 Promise reject 的错误。
以下是一个例子：
-- -------------------- ---- -------
----- -------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
---------- -----------------
-- ------
---
-
--- -
----- ---- - ----- ------------
------------------
- ----- ------- -
---------------------
-输出结果为：
Error: Reject
at Timeout._onTimeout [as _onTimeout] (/code/script.js:5:13)
at listOnTimeout (internal/timers.js:549:17)
at processTimers (internal/timers.js:492:7)4. 并行执行
使用 await 可以使函数顺序执行，但在某些情况下，需要并行执行多个异步操作。可以使用 Promise.all 实现。
以下是一个例子：
-- -------------------- ---- -------
----- -------- ------------- -
------ --- --------------- -- -
------------- -- -
------------- --------
-- ------
---
-
----- ------ - --- -- ---
----- -------- - ----- ------------------------- -- ----------------
----------------------输出结果为：
[ 'Data 1', 'Data 2', 'Data 3' ]
总结
async/await 是一种优雅的异步编程方式，在处理异步操作上非常方便。需要注意的是，async/await 本质上是基于 Promise 实现的，因此需要了解 Promise API。在实际开发中，建议在适当的场景下使用 async/await。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645af764968c7c53b0d5319f