在前端开发中，异步编程是非常常见而且重要的。在 JavaScript 中，我们通常使用回调函数、Promise、Generator 等方式来处理异步操作。然而这些方式都有其自己的局限性，例如回调函数容易导致代码嵌套过多、Promise 链式调用繁琐、Generator 需要手动迭代等等。为了解决这些问题，ECMAScript 2015 引入了 async/await 语法糖，使得异步编程变得更加简单和直观。
async/await 的基本用法
async/await 可以让我们使用类似同步代码的方式来处理异步操作。其中 async 用于声明一个函数为异步函数，而 await 则用于等待异步操作完成并返回其结果。示例如下：
----- -------- --------------- ----- -------- - ----- ----------- ----- ---- - ----- ---------------- ------ ----- -
上述代码使用了 async/await 来获取一个 URL 对应的 JSON 数据。我们首先使用 Fetch API 发送一个网络请求，然后使用 await 等待响应对象的返回。在得到响应后，我们再次使用 await 等待解析后的 JSON 数据。最后，我们返回这个数据并由调用者使用。
错误处理
在异步操作中，错误处理是一个常常需要关心的问题。传统的方式中我们通常使用回调函数机制来监听请求的错误，例如：
------------------------ -- -
--------------- -
------ ----------------
- ---- -
----- --- -------------- ---------
-
------------ -- -
-- -- --------- ---- ----
-------------- -- -
---------------------
---使用 async/await 来处理错误则更加直观简洁：
----- -------- -------------- -
--- -
----- -------- - ----- -----------
--------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- --- -------------- ---------
-
- ------------ -
---------------------
-
-上述代码通过在异步函数中使用 try/catch 语句块来捕获可能发生的错误。如果网络请求成功，我们仍然使用 await 来等待数据的处理，如果请求失败则直接抛出一个错误对象。在 catch 语句块中，我们可以对捕获到的错误进行处理。
并行处理多个异步操作
在实际应用中，我们可能需要同时处理多个网络请求或数据库操作等异步操作。使用 async/await 可以让处理这些操作变得更加直观和方便。
----- -------- --------------- -
----- ------- ------ - ----- -------------
-------------------------------------------
------------------------------------------
---
-- -- --------- ---- ----- --- -----
-上述代码中，我们使用 Promise.all 方法并行发送了两个网络请求，然后使用 await 等待两个请求都完成，并将结果分别存储在 data1 和 data2 中。在得到这些数据后，我们可以做一些自己的处理。
async/await 和 Generator 的比较
除了 async/await，Generator 也可以用来处理异步操作，例如：
--------- ----- - ----- ----- - ----- ------------------------------------------- ----- ----- - ----- ------------------------------------------- -- -- --------- ---- ----- --- ----- - ----- ---- - ------ ---------------------------- -- ---------------------------------- -- ------------------
上述代码使用 Generator 和一个迭代器对象来处理两个异步操作的返回值。在 Generator 函数上，我们通过 yield 来让异步调用暂停，并以变量存储其返回值。在调用 Generator 函数时，我们需要手动迭代这个迭代器对象并在上一个 yield 语句返回值时将其传递给下一个。
虽然 Generator 也可以处理异步操作，但是相比 async/await 它需要手动迭代来处理每个异步操作，代码看起来相对复杂。而 async/await 则可以让我们像处理同步代码一样处理异步操作，代码更加简洁易懂。
总结
使用 ECMAScript 2015 的 async/await 可以让我们更加方便直观地处理异步操作，避免了回调函数和 Promise 链式调用带来的冗余和嵌套。在实际开发中，我们可以结合 try/catch、Promise.all 等方法来处理异步操作中的错误和多个操作的并行调用。在选择异步编程的方式时，我们可以酌情选择 async/await 或者 Generator 等方式，但是建议尽量使用 async/await 来写更加简洁和直观的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64aed8d448841e9894b081a6