在前端开发中，我们经常需要处理异步操作，例如从后台获取数据、发送请求等等。传统的方式是使用回调函数，在回调中处理异步操作的结果。但是，当这个回调链越来越长时，代码变得难以阅读和维护。ECMAScript 2017 引入了 async/await ，它可以让我们用同步的方式编写异步代码，使得代码更加简洁易懂。
async/await 的基本用法
async 函数是 ECMAScript 2017 中新增的一种异步操作处理方式。它是一个返回 Promise 对象的函数，并且在函数内部可以使用 await 关键字来等待异步操作的结果。例如，我们可以使用 async/await 来获取后台接口的数据：
-- -------------------- ---- ------- ----- -------- ----------- - ----- -------- - ----- -------------------------------------- ----- ---- - ----- ---------------- ------ ----- - --------------------- -- - -- ---- ------------ -- - -- ---- ---
使用 async/await 可以让代码看起来像同步代码一样简洁，而不是像传统的异步回调那样嵌套。
错误处理
在异步操作中，很容易出现错误。在 async 函数中，如果发生错误，它会被包装成一个 rejected 状态的 Promise。我们可以使用 try/catch 块来处理这些错误：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ----- -
------------------------ -----
----- ----
-
-
--------------------- -- -
-- ----
------------ -- -
-- ----
---在 try/catch 块中，我们可以捕获并处理可能发生的错误，并且可以选择重新抛出错误，以便让调用者处理。
并发处理
在编写异步代码的时候，我们有时候需要在多个异步操作完成后执行一些代码。使用 Promise.all 可以等待多个 Promise 对象全部完成，然后执行一些代码。而在 async 函数中，我们可以使用 Promise.all 和 await 组合来完成这个任务。
-- -------------------- ---- -------
----- -------- ----------- -
----- ------- ------ ------ - ----- -------------
---------------------------------------------------- -- -----------------
---------------------------------------------------- -- -----------------
---------------------------------------------------- -- ----------------
---
------ -
------
------
-----
--
-
--------------------- -- -
-- ----
------------ -- -
-- ----
---在这个例子中，我们使用 Promise.all 来等待三个异步操作的结果，并使用数组解构语法来获取结果。我们可以为每个 Promise 对象添加自己的 .then() 处理函数，但使用 Promise.all 更加方便。
总结
ECMAScript 2017 中的 async/await 可以缩短回调链，让我们用同步的方式编写异步代码，使得代码更加简洁易懂。在使用 async/await 时，我们要注意错误处理和并发处理，以便编写出高质量的异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f3e8f1f6b2d6eab3d22a8f